Flex 布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

里面用到的主要属性：

• flexDirection
• flexWrap
• flexFlow
• justifyContent
• alignItems
• alignContent
• flex
• alignSelf

1.flexDirection决定项目的排列方向

可用两个属性：row:横向布局  column:垂直布局

2.flexWrap:换行

　nowrap 默认，不换行 wrap 换行 wrap-reverse 换行，第一行在下方

3.flexFlow  是上面两个的简写，默认值是row nowrap

4.justifyContent:：对齐方式

flex-start 左对齐
flex-end 右对齐 
center 水平居中 
space-between 水平平均分配，左右两端，紧贴父容器
space-around  水平平均分配，左右两端，有空隙

5.alignItems：在交叉轴上的对齐方式

flex-start 与父组件顶部对齐 
flex-end 与父组件底部对齐
center 处于中间位置
baseline 第一行文字的基线对齐 
stretch  如果项目未设置高度或设为auto，将占满整个容器的高度。

6.alignContent：定义了多根轴线的对齐方式 

flex-start | flex-end | center | space-between | space-around | stretch

7.flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，一般用于设置某个视图占父视图的比例

8.alignSelf：单独组件的竖直对齐方式 

auto 默认值，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
flex-start 
flex-end 
center 
baseline 
stretch

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