【CSS】flex布局

【Flex父节点布局属性】

1. flex-direction：主轴方向，横向排列或竖向排列

2. flex-wrap：nowrap 超出限定宽度/高度如何展示

3. flex-flow：direction和wrap的缩写

4. justify-content：主轴上的对齐方式 常用 center space-around

5. align-item，align-content：交叉轴对齐方式，主要使用flex-start、flex-end、center，区别在与items是应用于一行的情况，content是应用于多行的情况

【Flex子节点布局属性】

1. order：排序

2. flex-grow： 子元素放大比例，默认0，不放大

3. flex-shrink：子元素缩小比例，默认1，空间不足则缩小，设为0，则空间不足元素也不缩小

4. flex-basis：设定宽度，存在width则width不生效，默认auto，计算剩余空间减去元素宽度，如果设置了值，则计算剩余空间减去设定的值

5. flex：flex-grow，flex-shrink，flex-basis的缩写，较常用

6. align-self：覆盖父节点align-items，默认auto，继承父节点属性