flex 布局

1. flex 布局基本概念

   
   
2. flex container 的主要属性

flex-direction 方向 （默认row）
flex-wrap 换行 （默认nowrap）
flex-flow 上面两个属性的综合
justify-content 主轴方向的对齐方式
align-items 侧轴方向的对齐方式
align-content 多根轴线的对齐方式

3. flex item 的属性

flex-grow 增长比例（空间过多时，默认为 0，不放大）
flex-shrink 收缩比例（空间不够时，默认为 1，空间不够会缩小）
flex-basis 默认大小（一般不用）
flex 上面三个的综合
order 元素的展示顺序（值越小越先展示）
align-self 自身的对齐方式（默认值为 auto，继承父元素的 align-items 属性，若没有父元素，则等同于 stretch [ 每列高度与改行最高列相同 ]）

参考文献
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html