flex属性详情

flex基本概念

给主盒子设置display：flex；属性以后，该盒子就会变成一个flex容器，容器里面的内容成为flex元素。

未设置flex：

    <div class="container">
        <div class="item">12</div>
        <div class="item">34</div>
        <div class="item">56</div>
        <div class="item">78</div>
    </div>

css:

       .container{
            width: 800px;
            height: 300px;
            margin: 0 auto;
            background-color: blanchedalmond;
    
            
        }
        .item{
            background-color: brown;
            border: 1px solid black;
        }

给container盒子的css加上display：flex：

默认的排序为沿着主轴从左到右，这时候的效果和给flex元素设置flex：0 1 auto；的效果一致，并且flex元素默认自适应填满容器高度。

设置flex容器

flex-direction：设置flex元素排列的方向。

属性：

row（默认值）：沿着横轴从左到右排列

row-reverse：沿着横轴从右到左排列

column:沿着纵轴从上到下排列

column-revers：沿着纵轴从下到上排列

justify-content：设置flex元素在主轴上的排列方式。

属性：

flex-start（默认）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，每个flex元素之间的间隔都相等。

space-around：每个flex元素的左右间隔都相等，所以项目之间的间隔是最边上元素距离边框的2倍

align-items：设置flex项目在纵轴上的排列方式。

属性：

stretch（默认值）：如果flex元素没有设置高度或者设置为auto，那么flex元素将占满整个容器的高度。

center：纵轴的中点对齐。

flex-start：纵轴的起点对齐，可以理解为上对齐。

flex-end：纵轴的终点对齐，可以理解位下对齐。

设置flex元素

flex-grow：定义项目的放大比例，默认为0，无任何变化，当flex元素的flex-grow的值为相同值时，就会根据父元素的宽度，平均分配，填充满宽度。值越大，占得比例越大。

flex-shrink：定义项目的缩小比例，默认为1，如果容器的空间不足，就会等比例缩小。值越大，所占比例越小。

flex-basis：主轴的排列为宽度，纵轴排列为高度，设置px，默认值为auto。

flex：综合上面三个样式，比如flex：0 1 auto；

align-self：flex元素对齐方式(auto|flex-start|flex-end|flex-end|center|baseline|stretch)