display：flex属性

最新推荐文章于 2025-12-05 11:06:54 发布

原创最新推荐文章于 2025-12-05 11:06:54 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何在CSS中使用display: flex属性，包括在父容器和子容器上应用的语法，以及需要注意的事项，内容源于作者在逆战班的学习体验。

添加到父容器上的语法

1.display:flex;
2.flex-direction:布局的排列方向（决定了主轴）
    主轴水平（显示为行）：
        row（默认值）：默认从左往右排
        row-reverse：默认从右往左排
    主轴水平（显示为列）：
        column：默认从上往下排
        column-reverse：默认从下往上排
3.flex-wrap:是否进行换行处理（不常用）
    nowrap：默认值，不换行处理
    wrap：换行处理，折行方向与原排列方式一样
    wrap-reverse：换行处理，折行方向与原排列方式相反
4.justify-content：决定主轴方向上子项的对齐和公布方式
    ①.flex-star：子项都去起始位置对齐
    ②.flex-end:子项都去结束位置对齐
    ③.center：子项都去中心位置对齐
    ④.space-between：表现为两端对齐，多余的空白间距只在元素中间区域分配
    ⑤.space-around：每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
    ⑥.space-evenly：视觉上每个flex子项两侧空白间距完全相等。
5.align-items：每行子元素上下对齐方式
    flex-start：整体靠起始位置排列
    center：整体居中排列
    flex-end：整体靠结尾排列
6.align-content：多行侧轴对齐方式与justify-content的操作相反，最少需要两行才能看出效果
    ①.stretch（默认）：多行下有几行就会把容器划分为几部分，默认就是stretch拉伸的。
    ②.flex-star：子项都去起始位置对齐
    ③.flex-end:子项都去结束位置对齐
    ④.center：子项都去中心位置对齐
    ⑤.space-between：表现为两端对齐，多余的空白间距只在元素中间区域分配
   	⑥.space-around：每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
    ⑦.space-evenly：视觉上每个flex子项两侧空白间距完全相等。

添加到子容器上的语法

1.order：排序；所有flex子项的默认值是0，通过设置order可改变某一个子项的排序位置。
2.flex-grow：扩展；（想看到扩展的效果，必须有空隙）
    0：默认值，不去扩展
    1：去扩展，把空白区域全部占满，按比例分配空隙
    注：比例值总和<1:有空隙； 比例值>=1:无空隙。
3.flex-shrink：收缩（注：大小是跟正常缩放1进行比较的）
    1：正常默认值
    0：表示不收缩
    0.5：收缩小一些
    2：收缩大一些   
4.flex-basis：定义分配剩余空间之前元素的默认大小，（跟flex-shrink/flex-grow很像。）
        flex-shrink/flex-grow是设置一个比例值，flex-basis是设置一个具体值。
    flex : 一种复合写法
        flex-grow  flex-shrink  flex-basis
        flex:1;
            flex : 1 1 0    
        flex:0;
            flex : 0 1 0
5.algin-self：控制单独某一个flex子项的垂直对齐方式，跟align-items操作很像，区别就是只是针对某一个子项。

注意

1.默认情况下，弹性盒子中的子元素是左右排列。
2.默认情况下，当宽高不写的时候，主轴水平时，宽度由内容决定，高度由父容器决定。
3.默认情况下，当宽高不写的时候，主轴垂直时，宽度由父容器决定，高度由内容决定。
4.当子项的总宽度大于父容器的时候，会自动收缩（弹性的优先级是大于自身固定大小的。）
5.当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。

以上就是我在逆战班学习到的display：flex属性。