对Flex布局的理解及其使用场景
- 理解
Flex是FlexibleBox的缩写，意为"弹性布局"。设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效，采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列。
- 容器的属性
2.1 flex-direction：决定主轴的方向。row | row-reverse | column | column-reverse;
- row
- row-reverse
- column
- column-reverse
2.2 flex-wrap：容器内的项目沿着轴线布局时是否换行；nowrap ，wrap，wrap-reverse 2. flex-flow：flex-direction和flex-wrap的组合简写；flex-flow: || ，默认值为row nowrap 2. justify-content： 定义了项目在主轴上的对齐方式。flex-start | flex-end | center | space-between | space-around;
2.3 align-items： 定义项目在交叉轴上如何对齐。flex-start | flex-end | center | baseline | stretch;
- baseline(为按照项目中文本的基线对齐)
- stretch(是默认值，没有设置高度或者宽度情况下，则在侧轴拉伸项目)
2.4 align-content： 定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。修改 flex-wrap 属性的行为。
- 项目属性
order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大（按照多余的空间大小计算放大大小）。。
flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小（按照不足的空间大小计算缩小大小）。
flex-basis：定义在分配多余空间之前，项目占据的主轴空间；
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。**不适用于块类型的盒模型和表格单元。**
