Flex布局及其应用

什么是弹性盒子？

弹性盒子是 CSS3 的一种新的布局模式。相对于传统的依赖于display+position+float的布局方式，弹性盒子更加以有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

任何一个容器都可以指定为Flex布局，你需要的仅仅是增加一行

display: flex;

如果是行内元素的话则是

display: inline-flex;

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

属性值为：row(默认)、row-reverse、column、column-reverse，分别对应的主轴以及起点为左、右、上、下。

属性值为：nowrap(默认)、 wrap、wrap-reverse，分别对应不换行，换行，换行且第一行放在下面。

属性值为：flex-start（默认）、flex-end、center、space-between、space-around，分别对应为起点对齐、终点对齐、居中对齐，两端对齐，左右间隔相等对齐（可以看做左右设置不重叠的margin）。

属性值为：flex-start、flex-end、center、baseline、stretch（默认），分别对应起点、终点、居中、第一行文字基线、占满容器高度（默认，未设置高度或者auto情况下）

align-content：多轴线对齐方式

注意：只有一根轴的时候无效，也就是单行项目是无效的。

注意：这里的多轴线是多行的意思，不是指代垂直水平两根轴。

属性值为：flex-start、flex-end、center、space-between、space-around、stretch（默认），分别对应交叉轴的起点、终点、居中、两端、相同间隔、占满（可以看做平均分配了，但是项目设置宽高的话，空间上会平均分配，但是项目本身宽高不会变）

应用场景：

1 浏览器的视口空间不足，要求视口中的特定块要按照比例进行缩放

2 应对一些布局是要以基准线(baseline)对齐的特殊布局方法

3 需要模块垂直居中

flex: 1;

flex: 0 0 20%;

order: -1;