12

Flex弹性布局

1. 开启弹性
   父容器设置：display: flex;
   容器分为：主轴、侧轴（交叉轴）
   默认主轴水平向右，侧轴垂直向下。

2. 父容器常用属性

3. flex-direction 主轴方向
   row水平、column垂直、reverse反向

4. justify-content 主轴对齐
   flex-start左对齐、center居中、flex-end右对齐、space-between两端均分、space-around空隙均分

5. align-items 单行侧轴对齐
   center垂直居中最常用

6. flex-wrap: wrap; 子元素自动换行

7. align-content 多行侧轴排布

8. 子项flex属性

9. flex-grow 剩余空间分配比例，默认0

10. flex-shrink 空间不足是否压缩，默认1

11. flex-basis 元素基础尺寸
    简写：flex:1 均分剩余空间

12. align-self 单个子项单独侧轴对齐

13. order 改变排列顺序，数值越小越靠前