伸缩布局

伸缩布局

父元素属性：

display:

    flex;将盒子转化为flex弹性布局盒子

flex-direction：调整主轴方向（默认水平方向 ）可以互换主侧轴：

    row：默认水平方向
    column：竖直方向
    row-reverse：水平反方向
    column-reverse：竖直反方向

justify-content：调整主轴方向对齐方式

    flex-start：从开始位置对齐，因为有主轴方向随意不能说向左对齐
    flex-end：从结束位置对齐
    center：居中
    space-around：均匀分布
    space-between：两端对齐

align-items：调整侧轴方向对齐方式

    flex-start：
    flex-end：
    center：
    beseline：以元素的基线作为对齐的标准
    stretch：伸缩，当不指定高的时候，高自动伸长

flex-warp：控制是否换行

    wrap：换行
    nowrap：不换行

align-content：堆栈排列，对flex-wrap后的换行进行控制

    flex-start：
    flex-end：
    center：
    space-around：均匀分布
    space-between：两端对齐
    stretch：

flex-flow：是flex-direction和flex-warp的简写

    column wrap
    column nowrap
    ......

子元素的属性

flex：将父盒子剩余的空间进行分配，除去width的部分

    1   2   3   ......

align-self：可以覆盖父元素设置的align-items

    flex-start
    flex-end
    center
    baseline
    stretch

order：

    数字大小代表显示的前后顺序
    1   2   3