flex布局的使用

前言

flex弹性布局，解决了无处安放的div。

使用

图中的div都为宽100px,高100px的div。

flex-direction

决定了flex-item 排列的方向

row

水平方向(默认)

水平垂直居中

        display: flex;
        align-items: center;
        justify-content: center;

column

垂直方向

垂直水平居中

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

flex-wrap

flex-wrap:no wrap //子div平分了父div的宽度

flex-wrap:wrap

flex-wrap:wrap-reverse

消除flex-wrap 带来的间隔
在父容器上设置 align-content: flex-start;

flex

flex-basis

指定flex-item在主轴方向上的初始大小,下图表示在1号div上增加flex-basis:50px,这是1号div的宽度就变成了50px

flex-grow

flex-item的成长系数,给div1设置flex-grow:1,父容器宽度为220px时,div1的宽度变为120px。即按照系数比占用了剩余的空间。

flex-shrink

flex-item的收缩系数,默认为1，设置为0则不收缩。如果此时设置div1的flex-shrink为0.6宽度为200px

最终div1的宽度为 200-(80 //子div超出父div的部分)*(200*0.6)/(200*0.6+100*1))