网页布局，是css的一个重要应用。
传统的网页布局，主要是基于盒模型，和display、position、float属性，这些属性的一个优势就是简单，容易理解，但也有一些不方便的地方，比如在实现垂直居中的时候。
2009年，W3C提出了一种新的解决方案：Flex（Flexible Box，弹性布局）布局。
设置为flex布局的容器称为flex容器，flex容器的子元素称为容器项目（flex item）。
将元素设置为flex布局后，子元素的float、clear、vertical-align属性将失效。
Flex布局的一些基本概念
Flex容器默认有两根轴，水平的主轴（main axis）和垂直的交叉轴（cross asix）。主轴的开始位置叫做main start，主轴的结束位置叫做main end。交叉轴的开始位置叫做cross axis，交叉轴的结束位置叫做cross end。
容器项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
Flex容器的一些属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1.flex-direction：容器的方向
有4个值：
row（默认值）：主轴为水平方向，起点在左侧
row-reverse：主轴为水平方向，起点在右侧
column：主轴为垂直方向，起点在顶部
column-reverse：主轴为垂直方向，起点在底部
2.flex-wrap：项目排列
有3个值：
nowrap(默认)：不换行
wrap：换行，第一行结束后，另起一行开始排列
wrap-reverse：换行，第一行结束后在上面一行开始排列
3.flex-flow：flex-direction和flex-wrap的简写形式，默认值为row nowrap
.ele{flex-flow:<flex-direction>||<flex-wrap>}
取值请看例子：
.container{
flex-flow:row nowrap;
}
4.justify-content:项目在主轴上的对齐方式
有5个值：
flex-start(默认)：左对齐
flex-end:右对齐
center：居中
space-between：两端对齐，项目之间的间隔相等
space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍
5.align-items：项目在交叉轴上的对齐方式
有5个值，与交叉轴的方向有关，具体如下：
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch(默认值)：如果项目未定义或height为auto，将占满整个容器的高度
6.aglin-content：多根轴线的对齐方式，如果只有一根轴线，该属性不起作用
.box{ align-content: flex-start || flex-end || center || space-between || space-around || stretch; }
有6个值：
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框之间的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴
项目的属性
项目可以设置以下这些属性：
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1.order：项目的排列顺序。数值越小，排序越靠前，默认为0
.item { order: <integer>; }
2.flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item { flex-grow: <number>; /*default 0*/ }
如果所有项目的flex-grow都为1，则它们将等分剩余空间。如果一个项目的flex-grow为2，其他项目的flex-grow为1，那么前者将占有的剩余空间比后者多一倍。
3.flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将被缩小。
.item { flex-shrink: <number>; /*default 1*/ }
如果所有项目的flex-shrink都为1，当空间不足时，都将等比例缩小。但是如果一个项目的flex-shrink为0，其他项目的flex-shrink为1，那么当空间不足时，前者不缩小，后者则将等比例缩小。
属性值不能为负值。
4.flex-basis：在定义剩余空间之前，项目占据的主轴的空间。浏览器根据这个属性，计算主轴是否有剩余空间，它的默认值为auto，即项目的本来大小。
.item { flex-basis: <length> || auto; /*default auto*/ }
5.flex：flex-grow、flex-shrink、flex-basis的简写，默认为0 1 auto，后两个属性为可选属性。
flex属性有两个快捷值：auto（1 1 auto）、none（0,0，auto）。
建议使用简写方式。
6.align-self：允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
该属性可以取6个值，除了auto以外，其他都与align-items完全相同。
分享自：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html