网页布局（layout）是CSS的一个重点，传统的方式是基于盒子模型，依赖display、position、float等属性，对于特殊布局非常不便，比如垂直居中。2009年，W3C提出了Flex布局方案，一种简单、完整、响应式的页面布局。
Flex布局是“弹性布局”（Flexible Box），用来为盒状模型提供最大的灵活性，任何容器都可指定为Flex布局。
弹性布局原理
采用弹性布局的元素称为Flex容器（Flex Container），容器的所有子元素自动成为容器成员，称为Flex项目（Flex Item）。
Flex容器
Flex容器（Flex Container）默认存在两根轴：
- 水平的主轴（main axis）
主轴的开始位置即与边框的交叉点称为main start，结束位置叫做main end。 - 垂直的交叉轴（cross axis）
交叉轴的开始位置叫做cross start，结束位置叫做cross end。
Flex项目（Flex Item）默认沿着主轴排列，单个项目占据的主轴空间叫做main size， 占据交叉轴空间叫做cross size。
设置为Flex弹性布局后，子元素的float、clear、vertical-align属性将失效。
.flex{
display:flex;
/*webkit*/
display:-webkit-flex;
}
行内元素也可使用弹性布局
.flex-inline{
display:inline-flex;
}
弹性容器（Flex Container）属性
Flex容器上的属性共有6个：
-
flex-direction决定主轴（main axis）的方向，即弹性项目（flex item）的排列方向。
flex-direction: row | row-reverse | column | column-reverse;
# 默认值，主轴为水平方向，起点为左端。
flex-direction:row;
# 主轴为水平方向，起点在右端。
flex-direction:row-reverse;
# 主轴为垂直方向，起点为上端。
flex-direction:column;
# 主轴为垂直方向，起点为下端。
flex-direction:column-reverse;
flex-direction 排列方向
-
flex-wrap默认情况下，弹性项目（flex item）排列在一条轴线上，flex-wrap定义了如果在一条轴线上排列不下弹性项目时，如何换行的情况。
flex-wrap: nowrap | wrap | wrap-revers;
flex-wrap 换行方式
# nowrap 默认不换行
flex-wrap:nowrap;
nowrap 不换行
# wrap 换行排列
flex-wrap:wrap;
wrap 换行
# wrap-reverse 反转换行排列，即上下项目位置交换。
flex-wrap:wrap-reverse;
wrap-reverse 反转换行
-
flex-flow是flex-direction属性和flex-wrap属性的简写方式，默认水平排列且不换行row nowrap。
flex-flow: <flex-direction> <flex-wrap>;
-
justify-content定义弹性项目（flex item）在主轴（main axis）上的对其方式
justify-content: flex-start | flex-end | center | space-between | space-around;
# 默认弹性项目左对齐
justify-content: flex-start;
# 弹性项目右对齐
justify-content: flex-end;
# 弹性项目居中对齐
justify-content: center;
# 弹性项目两端对齐，项目之间的间隔相等。
justify-content: space-between;
# 弹性项目两侧间隔相等，注意项目之间的间距比项目与边框之间的间距大一倍。
justify-content: space-around;
具体对其方式与轴的方向相关，这里假设主轴为从左到右。
justify-content 对其方式
-
align-items定义弹性项目（flex item）在交叉轴（cross axis）上如何对齐
align-items: stretch | flex-start | flex-end | center | baseline;
具体的垂直对其方式与交叉轴的方向有关，假设交叉轴从上到下。
# 默认若弹性项目未设置高度或auto，则项目将占满容器高度。
align-items: stretch;
垂直对齐 stretch
# 交叉轴的起点对齐
align-items:flex-start;
垂直对齐 顶对齐
# 交叉轴的终点对齐
align-items: flex-end;
垂直对齐 底对齐
# 交叉轴的中点对齐
align-items: center;
垂直对齐 中线对齐
# 项目的第一行文字的基线对齐
align-items: baseline;
垂直对齐 基线对齐
-
align-content定义多根轴线的对齐方式，如果弹性项目只有一根轴线，该属性无效。
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
# 默认轴线占满整个交叉轴
align-content: stretch;
内容对齐 stretch
# 以交叉轴的起点对齐
align-content: flex-start;
内容对齐 起点对齐 flex-start
# 以交叉轴的终点对齐
align-content: flex-end;
内容对齐 低点对齐 flex-end
# 以交叉轴的中点对齐
align-content: center;
内容对齐 居中 center
# 与交叉轴两端对齐，轴线之间的间隔平均分布。
align-content: space-between;
内容对齐 平均分布
# 每根轴线两侧的间隔相等，轴线之间的间隔比轴线与边框的间隔间隔大一倍。
align-content: space-around;
内容对齐