感谢：阮一峰大神，本文在大神的讲解的网页CSS的flex的基础上针对ReactNative再进行介绍(属性名，及参数在RN上的异同)
参考：http://reactnative.cn/docs/0.41/layout-props.html
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
简介：在Android和iOS中常用的有线性布局、帧布局、相对布局、绝对布局、自动布局等。在ReactNative中，我们使用FlexBox（弹性盒子）布局方式。
一、 基本概念
1、在ReactNative中，通常需要界面渲染的内容都包含在一个View中。当然View中又可以包含单个或多个子元素。我们把相对的控件称为Flex容器（flex container），它的所有子元素称为容器成员(flex item)。利用Flex布局，我们能够很好的控制flex item的布局位置。
2、根据下图，了解一些概念：
容器默认存在两根轴：水平的主轴(mainaxis)和垂直的交驻轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start, 结束位置叫做main end; 交叉轴的开始位置叫做cross start, 结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
注：看到这里如果对概念不清楚，不用担心！接下来对照实例能很好的理解。
二、 常用容器属性
1、 flexDirection:‘row|row-reverse|column|column-reverse’
该属性决定主轴的方向(即flex item的排列方向)
row: 主轴为水平方向，起点在左端
row-reverse: 主轴为水平方向，起点在右端
column: 主轴为垂直方向，起点在上沿
column-reverse: 主轴为垂直主向，起点在下沿
注：通常我们只用到row和column
a)
b)
2、 justifyContent: ‘flex-start | flex-end | center | space-between | space-around ’
定义了项目在主轴上的对齐方式，以下默认主轴为row的情况
flex-start（默认值）： 左对齐
flex-end : 右对齐
center : 居中
space-between : 两端对齐，项目之间的间隔都相等
Space-around : 每个项目两侧的间隔相等。项目之间的间隔比项目与边框的 间隔大一倍
3、 flexWrap: ‘nowrap | wrap’
默认情况下，项目都排在一条线（称‘轴线’）上。flexWrap属性定义，如果一条轴线排不下，如何换行。
a) nowrap (默认) : 不换行
b) wrap : 换行，第一行在上方
c) wrap-reverse (React Native上并元此属性，区别于网页CSS)
4、 justifyContent : ‘flex-start |flex-end | center | space-between | space-around’
属性定就了项目在主轴上的对齐方式，下图假设主轴为水平
a) flex-start (默认值) : 左对齐
b) flex-end : 右对齐
c) center : 居中
d) space-between : 两端对齐，项目之间的间隔都相等
e) space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
5、 alignItems : ‘flex-start |flex-end | center | stretch | baseline’
此决定了子元素在次轴（交叉轴或纵轴）方向的排列方式（此样式设置在父元素上）。例如若子元素本来是沿着竖直方向排列的（即主轴竖直，次轴水平），则alignItems决定了它们在水平方向的排列方式。此样式和CSS中的align-items表现一致，默认值为stretch
a) stretch (默认值) ： 如果项目未设置高度或设为auto,将占满整个容器的高度
b) flex-start : 交叉轴（纵轴或次轴）的起点对齐
c) flex-end : 交叉纵的终点对齐
d) center : 交叉轴的中间点对齐
e) baseline : 项目的第一行文字的基线对齐
三、 常用的元素属性
1、 flex标签
使用flex，通常会在flex container设置flex:1 表示使用flex布局并且布局将占用整个屏幕（在ReactNative中，包含状态栏）
在Reac Native中，flex的取值只能为整数值，区别于CSS的’auto’。
当flex取正整数值时， is a positive number, it makes the component flexible and it willbe sized proportional to its flex value. So a component with flex setto 2 will take twice the space as a component with flex set to 1.
When flex is 0, the component issized according to width and height and it is inflexible.
When flex is -1, the component isnormally sized according width and height. However, if there'snot enough space, the component will shrink to its minWidth and minHeight.
2、 alignSelf: ‘auto | flex-start |flex-end | center | baseline | stretch’
决定了元素在容器的决轴方向的排列方向，该属性除了auto，其它值均与alignItems属性完全一致
3、 flexGrow number
属性定义元素的放大比例，默认为0，如果存在剩余空间也不放大，如果所有的项目的属性值都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flexGrow属性为2，其它项目都为1，则前者占据的剩余空间将比其它项多一倍
4、 flexShrink number
属性定义了元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有的元素值为1，当空间不足时，都将等比例缩小。如果一个项目的属性为0，其它项目都为1，则空间不足时，前者缩小。