flex布局

flex布局，即FlexibleBox，弹性布局，是一种非常灵活的CSS布局方式，今天我们从以下两个方面介绍Flex布局。

容器属性

• flex-direction：决定主轴方向

属性值： 有row，row-reverse,column,column-reverse 四种情况

• justify-content：主轴对齐方式

属性值： 有 flex-start | flex-end | center | space-between | space-around | space-evenly 六种情况;

• align-item：交叉轴对齐方式对齐方式

属性值： 有 flex-start | flex-end | center | baseline | stretch 五种情况;

注：align-items:stretch;当子元素没有设置高度或者高度为auto时才会拉伸占满。

• flex-wrap：换行

属性值： 有 nowrap | wrap | wrap-reverse 三种情况;、

注：如果里面元素宽度超出容器宽度，里面元素会被挤压。

• align-content：换行后多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

属性值： 有 flex-start | flex-end | center | space-between | space-around | stretch 六种情况;

元素属性

• order：用来设置自身在容器中的位置。属性值为数字，值越小，排列越靠前，默认为 0 。

注：属性值可以是负数。

• flex-grow：如果容器还有剩余空间，则占容器剩余空间。属性值为数字，默认为 0 ，即如果存在剩余空间，也不放大 。

注：如果属性值都为1，则平分剩余空间。

注：计算原理：

容器宽度为500，元素宽度为100，即剩余空间为500 - (100*3) = 200
第一个元素设置flex-grow：1，第二个元素设置flex-grow：2，第三个元素设置flex-grow：3
总grow为 1 + 2 + 3 = 6
第一个元素占剩余空间为：200 * 1/6 = 33.333333333333336
第二个元素占剩余空间为：200 * 2/6 = 66.66666666666667
第三个元素占剩余空间为：200 * 3/6 = 100
第一个元素最终大小为：100 + 33.333333333333336 = 133.333333333333336
第二个元素最终大小为：100 + 66.66666666666667 = 166.66666666666667
第三个元素最终大小为：100 + 100 = 200

• flex-shrink：如果容器空间不足，该元素压缩。属性值为数字，默认为 1。

注：数字越大，压缩越多，为0不压缩。

注：都为1，则等比例压缩

注：计算原理：

容器宽度为500，元素宽度为200，即超出空间为(200*3) - 500 = 100
第一个元素设置flex-shrink：0，第二个元素设置flex-shrink：1，第三个元素设置flex-shrink：2
总shrink为 0 + 1 + 2 = 3
第一个元素压缩空间为：100 * 0/3 = 0 不压缩
第二个元素压缩空间为：100 * 1/3 = 33.33333333333333
第三个元素压缩空间为：100 * 2/3 = 66.66666666666666
第一个元素最终大小为：200 - 0 = 200
第二个元素最终大小为：200 - 33.33333333333333 = 166.66666666666669
第三个元素最终大小为：200 - 66.66666666666666 = 133.33333333333334

• flex-basis：在容器有剩余空间的情况下占据的容器主轴空间，默认值为auto，即自身大小。

注：flex-basis设置宽度时有优先级max-width/min-width > flex-basis > width

• align-self：设置自身对齐方式，可覆盖父元素的 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 。

属性值： 有 auto | flex-start | flex-end | center | baseline | stretch 六种情况;

容器设置
.box{
    display: flex;
    justify-content: center;
    align-items: center;
    }
元素自身设置
 &:nth-child(2) {
    background-color: yellowgreen;
    align-self: flex-start;
}

&:nth-child(3) {
    background-color: bisque;
    align-self: stretch;
    height: auto;
}

例子：

举个例子：比如说移动端的时候，头部底部高度固定需求，中间区域高度自适应

这个时候我们可以用flex布局，主轴设为column，中间区域占剩余空间

<div class="box">
    <div class="header">头部</div>
    <div class="body"></div>
    <div class="footer">底部</div>
</div>
.box{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    >div{
        width: 100%;
    }
    .header{
        height: 100px;
        background-color: #1a79ff;
    }
    .body{
        flex: 1;
    }
    .footer{
        height: 100px;
        background-color: #1a79ff;
    }
}