React-native 的 flexbox 布局 ：
display ： 用来指定容器是否为伸缩容器，其语法为
display ： flex | inline-flex
flex ： 表示块级=伸缩容器
inline-flex ： 表示 行内伸缩容器
flex-direction : row | row-reverse | column | column-reverse
row : 表示水平方向 ， 从左到右
row-reverse : 表示水平方向 ， 从 右到左
column ： 表示垂直方向 ，从上到下
coulnm-reverse ： 表示垂直方向 ， 从下到上
flex-wrap ： 表示当主线轴空间不足是要不要换行，该如何换行，
flex-wrap ： nowrap | wrap | wrap-reverse
nowrap ： 表示伸缩空间，不换行
wrap ： 表示换行，换到第二行从左边开始
wrap-reverse ： 表示从上到下换行
flex-flow ： 是 flex-direction 和 flex-wrap 的缩写版本 ,其同时定义的伸缩容器的主轴和侧轴 其值 默认 为 row 和 nowrap
flex-flow : flex-direction flex-wrap
justify-content : 用于定义伸缩项目沿主轴的对齐方式
justify-content : flex-start | flex-end | center | space-between | space-around
flex-start : 伸缩项目沿主轴起始位置对齐
flex-end : 伸缩项目沿主轴结束位置对齐
center : 伸缩项目沿主轴中间位置对齐
space-between : 伸缩项目沿主轴平均分配在两侧 ， 第一个在主轴的开始位置， 第二个在主轴的结束位置
space-around : 伸缩项目平均的分配在主轴里 ， 两端个保留一半的空间
align-items : 用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式
align-items : flex-start | flex-end | center | baseline | stretch
flex-start : 伸缩项目向交叉轴的起始位置靠齐
flex-end : 伸缩项目向交叉轴的结束位置靠齐
center : 伸缩项目向交叉轴的中间位置靠齐
baseline ： 伸缩项目根据它们的基线对齐
stretch ： 伸缩项目在交叉轴方向拉伸填充整个伸缩容器
align-content : 表示伸缩项目在出现换行后在主线轴上的对齐方式
align-content : flex-start | flex-end | center | space-around | stretch
align-start : 伸缩项目向交叉轴的起始位置靠齐
flex-end : 伸缩项目向交叉轴的结束位置靠齐
cenetre ： 伸缩项目向交叉轴的中间位置靠齐
space-around : 伸缩项目向交叉轴的平均分布
stretch ： 伸缩项目向交叉轴的方向伸展以占用剩余的空间
伸缩项目支持的属性
order ： 用于定义项目的排序的顺序 ，数值越小拍越前面 ， 默认值 为 0
flex-grow ： 定义伸缩项目的放大比例 ， 默认是 0 如果是为 1 则设置为一个大小相等的剩余空间 ， 如果为 2 则表示该空间是其他空间的2倍
fglx-shrink ： 定义项目的收缩比例 ， 默认值是 1
flex-basis ： 定义伸缩项目的基准值 ，剩余的空间按比例进行伸缩
Flex 是 flex-grow ， flex-shrink ， flex-basis 三个属性的缩写
flex : none | flex-grow flex-shrink flex-basis 其中第二个和第三个是可选参数 ， 这三个的默认值 是 0 ， 1 ，auto
align-self ： 该属性用来设置单独的伸缩项目在交叉轴上的对其方式，会复写默认的对其方式，语法如下 ：
align-self : auto | flex-start | flex-end | center | baseline | stretch
auto : 按照项目自身设置的宽高显示
flex-start : 伸缩项目向交叉轴的开始位置靠齐
flex-end ： 伸缩项目向交叉轴的结束位置靠齐
center ：伸缩项目向交叉轴的中心位置靠齐
baseline : 伸缩项目按基线位置对齐
stretch ： 伸缩项目在交叉轴方向填充整个容器
