兼容：不考虑IE以及低端安卓机(4.3-)
容器属性：
flex-flow、flex-direction、flex-warp
justify-content、align-items、align-content
元素属性：
order、flex-grow、flex-shrink
flex-basis、flex、align-self
一、flex弹性盒模型 display: fiex (parent)
1、弹性元素永远沿着主轴排列
2、一个元素既可以是弹性容器也可以是弹性元素
二、主轴 flex-direction (parent)
1、设置主轴的方向
* row：左 -> 右
* column：上 -> 下
* row-reverse：右 -> 左
* column-reverse：下 -> 上
2、沿主轴排列处理 flex-wrap (parent)
* nowrap：不拆行，元素弹性伸缩
* wrap：折行
* wrap-reverse：反向折行
3、复合属性：flex-flow = flex-direction + flex-warp
三、元素弹性伸缩应对 child
1、 flex-warp: nowrap 时，容器宽度有剩余/不足，弹性元素可以使用以下属性：
* flex-shrink，考虑各个元素本身大小的情况下进行缩小，占满整个屏幕
* 有剩余宽度时，flex-shrink无效
* flex-grow，按各个元素声明的份数计算分配，叠加到原来的尺寸上
* 无多余宽度时，flex-grow无效
2、设置元素尺寸width、height，还有flex-basis，且和width/height同时设置时，flex-basis优先级更高，默认值为auto，此时如有width/height，则以设置的为准，否则容器大小根据内容撑开高度/宽度，其显示尺寸大小与主轴有关，即
flex-direction: column; 时，flex-basis就是元素的高度，反之亦然
3、复合属性： flex = flex-grow + flex-shrink + flex-basis
四、容器内如何对齐
1、主轴上的对齐方式 justify-content (parent)
2、交叉轴上的对齐方式
* 单行对齐 ailgn-items
* 多行对齐 align-content
align-content和align-items类似，但是只有在容器开启换行生效，属性值上多了两个值
六、其他 order：更优雅的调整元素顺序，值越小越靠前，默认为0
七、总结
八、兼容性写法
.flex{
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}