React Native的flexbox的布局

flexbox：可快速简单的完成各种伸缩性的设计。由W3C组织提出新的布局方案。

布局模型：

flexbox：是由伸缩容器和伸缩项目组成。其中设为display:flex或display:inline-flex的元素称为伸缩容器；伸缩容器的子元素称为伸缩项目。伸缩容器由两根轴组成，即主轴（main axis）和交叉轴（cross axis）.

伸缩容器属性：

display：该属性用来指定是否为伸缩容器（语法display：flex | inline-flex）

flex-direction：指定主轴的方向（语法flex-direction：row | row-reveerse | column | column-reverse）

flex-wrap：指定伸缩容器的主轴线方向空间不足的情况下，是否换行以及如何换行（nowrap | wrap | wrap-reverse）

flex-flow：是flex-direction和flex-wrap的缩写版本，同时定义伸缩容器的主轴和侧轴，默认row nowrap

justify-content：定义伸缩项目沿主轴线的对其方式（flex-start | flex-end | center | space-between（首尾两端平均分布） | space-around（平均地分布在主轴线里））

align-items：定义伸缩项目在伸缩容器上的对其方式（flex-start | flex-end | center | baseline | stretch）

align-content：用来调整伸缩项目出现换行后在交叉轴上的对其方式，类似于伸缩项目在主轴上使用justify-content（flex-start | flex-end | center | space-between（首尾两端平均分布） | space-around（平均地分布在主轴线里）| stretch（占用剩余的空间））

伸缩项目属性：

order：定义项目的排列顺序，数值越小越靠前，默认为0

flex-grow：定义伸缩项目的放大比例，默认为0，不放大；1：放大剩余空间大小

flex-shrink：定义伸缩项目的收缩功能，默认为1

flex-basis：设置伸缩项目的基准值，剩余空间按比例伸缩

flex：是以上三个flex-xxx的缩写，默认值为0 1 auto

align-self：设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对其方式（auto | flex-start | flex-end | center | baseline | stretch）

在React Native中使用flex-box

alignItems：用法与前面的align-items相同，区别在于它使用驼峰法

alignSelf：用法与前面的align-self相同，区别在于它使用驼峰法

flex：用法同上flex一样

flexDirection：用法与前面的flex-direction相同，区别在于RN中默认column

flexWrap：用法与前面的flex-wrap相同，区别在于它使用驼峰法

justifyContent：用法与前面的justify-content相同，区别在于它使用驼峰法