先安利两发对小K启发很大的，关于flex弹性盒布局使用的博文及演示道具~
博文 http://www.cnblogs.com/yhsa/p/6483675.html
演示 http://www.css88.com/demo/flexbox-playground/
一、什么是弹性盒布局？
flexible box，弹性盒子，即为弹性盒布局，它可以为几乎所有的元素添加，来最大增强元素的灵活性，但是弹性盒子是一种比较霸道的布局方式，在flex下，子元素的float、clear 和 vertical-align 属性将失效。
二、弹性盒布局的使用及各属性详解
1、给父容器添加display:flex或者inline-flex属性
2、父容器可以使用的属性值
2.1 flex-direction：决定主轴的方向（即项目的排列方向）
row（默认值）--- 主轴为水平方向，起点在左端。
row-reverse --- 主轴为水平方向，起点在右端。
column --- 主轴为垂直方向，起点在上沿。
column-reverse --- 主轴为垂直方向，起点在下沿。
2.2 flex-wrap：如果一条轴线排不下，如何换行
nowrap --- （默认值）不换行，当父容器宽度不够时，每个item会被适当挤压
wrap --- 换行，第一行在父容器最上方
wrap-reverse --- 换行，第一行在父容器最下方
2.3 flex-flow
flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap
2.4 justify-content：定义了项目在主轴上的对齐方式
flex-start（默认值） --- 左对齐，每个item之间会挤压
flex-end --- 右对齐，每个item之间会挤压
center --- 居中，每个item之间会挤压
space-between --- 两端对齐，项目之间的间隔都相等。（首尾项目分别在父容器最左和最右）
space-around --- 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。（首尾项目会与父容器两侧各有间隔）
2.5 align-items：定义项目在交叉轴上如何对齐
flex-start --- 交叉轴的起点对齐。
flex-end --- 交叉轴的终点对齐。
center --- 交叉轴的中点对齐。
baseline --- 项目的第一行文字的基线对齐。
stretch（默认值） --- 如果项目未设置高度或设为auto，将占满整个容器的高度。
2.6 align-content：定义了多根轴线的对齐方式（如果项目只有一根轴线，该属性不起作用）
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
3、子容器上使用的属性
3.1 order：定义排列顺序，数字越小越靠前。
3.2 flex-grow：定义项目放大的比例，默认为0。即如果存在剩余空间也不放大。
3.3 flex-shrink：定义了项目的缩小比例，默认为1。即如果空间不足，该项目将缩小。
3.4 flex-basis：定义了在分配多余的空间之前，项目占据的主轴空间（main size 项目的宽度）。
3.5 flex：是 flex-grow、flex-shrink 和 flex-basis 属性的简写，默认值为 0 1 auto。后两个属性可选。
该属性有两个快捷值 none（0 0 auto）和 auto （1 1 auto）。
建议优先使用这两个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
3.6 align-self：定义单个项目在交叉轴上的对齐方式，可覆盖 align-items 属性，属性值同align-items，默认值为auto。
