Flex布局
1.两根轴
水平的主轴（main axis）和垂直的交叉轴（cross axis）
2.一个注意
设为Flex布局以后，子元素的float、clear、display: inline-block 或 display: block和vertical-align属性将失效
3.六个容器属性
1、flex-direction：控制主轴方向
column-reverse：主轴为垂直方向，起点在下沿。
column：主轴为垂直方向，起点在上沿。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
2、flex-wrap：定义是否换行以及如何换行
nowrap（默认值）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
3、flex-flow ：flex-direction属性和flex-wrap属性的简写形式
默认值为row nowrap
4、justify-content：定义在主轴上的对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。 贴边
space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍 不贴边
5、align-items：定义在竖直方向上对齐方式
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果设置高度或设为auto，将占满整个容器的高度
6、align-content:定义多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
4.六个项目属性
1、order:定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以为负值
2、flex-grow:定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大（这个值可以是任何非负数，包括小数）
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
剩余空间：子容器在父容器的“主轴”上还有多少空间可以“瓜分”，被“瓜分”的空间为剩余空间。
- 剩余空间：x
- 假设有三个flex item元素，flex-grow 的值分别为a, b, c
- 每个元素可以分配的剩余空间为： a/(a+b+c) * x，b/(a+b+c) * x，c/(a+b+c) * x
3、flex-shrink:定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
如果子容器没有超出父容器，设置 flex-shrink 无效
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
- 三个flex item元素的width: w1, w2, w3
- 三个flex item元素的flex-shrink：a, b, c
- 计算总压缩权重： sum = a * w1 + b * w2 + c * w3
- 计算每个元素压缩率： S1 = a * w1 / sum，S2 =b * w2 / sum，S3 =c * w3 / sum
- 计算每个元素宽度：width - 压缩率 * 溢出空间
4、 flex-basis:定义了在分配多余空间之前，项目占据的主轴空间浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
max-width/min-width > flex-basis > width > box
5、flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto 后面两个属性可选
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
----------------------------
flex：1 :flex-grow: 1;flex-shrink: 1;flex-basis: 0%;
用于让一个弹性元素占据父容器中剩余空间的所有可用空间
----------------------------
flex：auto :flex-grow: 1;flex-shrink: 1;flex-basis: auto;
这个弹性元素会根据剩余空间按比例增长（如果有的话），它会根据需要收缩，并且它的初始大小是由其内容决定的，即自动大小。会尽量填充可用空间，但不会超过其内容的大小。
---------------------------
flex：none:flex-grow: 0;flex-shrink: 0;flex-basis: auto;
禁用弹性盒子模型的伸缩行为素；不会增长也不会收缩，它的大小会由其内容决定，即自动大小
6、align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
参考来源：
