flex布局，弹性盒子
1.display：flex 设置flex布局后，子元素的float、clear和vertical-align属性将失效
2.flex-direction 决定主轴的方向（即项目的排列方向）
属性：row|row-reverse|colum|column-reverse
3.flex-wrap 设置换行方式
nowrap（不换行）|wrap（换行，第一行在上方）|wrap-reverse（换行，第一行在下方）
4.flex-flow：<flex-direction>||<flex-wrap>
5.justify-content 设置项目在主轴上的对齐方式
flex-start(左对齐)|flex-end（右对齐）|center（居中）|space-between（两端对齐，项目之间的间隔都相等）|space-around（每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框间隔大一倍）
6.align-items 设置交叉轴上的对齐方式
flex-start|flex-end|center|baseline（项目的第一行文字的基线对齐）|stretch（占满整个容器高度）
7.align-content 设置多根轴线的对齐方式
flex-start|flex-end|center|space-between|space-around|stretch
8.order 设置项目的排列顺序，数值越小，排列越靠前，默认为0
9.flex-grow 设置项目的放大比例，默认为1
若一个项目的flex-grow为2，其他为1，则为2的占据为1的2倍
10.flex-shrink 设置项目的缩小比例，默认为1
11.flex none|[<flex-grow>|<flex-shrink>?||<flex-basis>]
12.align-self 设置单个项目与其他项目不一样的对齐方式
auto|flex-start|flex-end|center|baseline|stretch
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html