Flex布局

IT小王~

于 2023-07-01 14:24:43 发布

阅读量2.2k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_71263843/article/details/131489473

版权

flex布局也叫弹性布局说的通俗一点就是一个具有弹性的盒子 flex布局是目前比较流行也是比较好用的一个布局模型非常适合结构化布局提供了强大的空间分布对齐能力

flex布局不会产生浮动布局中脱标现象布局网页更加简单更灵活

flex-组成部分

1 弹性容器 2 弹性盒子 3 主轴：默认在水平方向 4 侧轴：默认在垂直方向

flex布局~主轴对齐方式

重点记住标红的

1 space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间

代码如下：

justify-content: space-between；

显示效果如图：

2 space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧

代码如下：

justify-content: space-around;

显示效果如图：

3 space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

代码如下：

justify-content: space-evenly;

显示效果如图：

4 center 沿主轴居中排列

代码如下：

 justify-content: center;

显示效果如图：

flex布局~侧轴对齐方式

重点记住center ，可以让元素垂直居中。

要想一个盒子水平垂直居中对齐可以通过 flex布局里面的 justify-content: center;

效果图如下：

代码如下：

.father {
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 设置为flex布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 侧轴垂直居中 */
    align-items: center;
}

.son {
    width: 200px;
    height: 200px;
    background-color: purple;
}

flex布局~伸缩比

伸缩比：把父盒子分为若干份数，每个子盒子各占几份。

伸缩比代码如下：