首先介绍一下RN布局的基础知识。
（基础知识部分转自 http://www.devio.org/2016/08/01/Reac-Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97）
现在的版本好像多了一些属性，我会在文中标注。
后面会附一些我自己的截图和一些使用分析。
RN的容器布局方面有以下flex属性：
· flexDirection enum(‘row’, ‘column’,’row-reverse’,’column-reverse’)
· flexWrap enum(‘wrap’, ‘nowrap’,'wrap-reverse')
· justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’,'space-evenly')
· alignItems enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)
接下来对这四个属性进行分别解释
flexDirection表示容器中子元素的排列方式（主轴方向）
row: 从左向右依次排列
row-reverse: 从右向左依次排列（第一个元素在最右边）
column: 默认的排列方式，从上向下排列
column-reverse: 从下向上排列（第一个元素在最下面）
*注意：如果只是想将元素右对齐，需要使用justifyContent:flex-end而不是flexDirection:row-reverse。使用reverse会将排列顺序也颠倒过来，column同理
如图所示
flexWrap表示自动换行，如果元素超出屏幕且flexWrap为"wrap"则会将元素放到下一行显示，如果排列为column，则为放到下一列显示。
如果使用wrap-reverse，会从侧轴末端开始显示，往前换行。
*注意：换行时，当前行高度为当前行的元素中最高的那个。
justifyContent表示元素顺着主轴方向的分配方式（即主轴方向排列时元素的摆放和空隙）
flex-start 是默认属性，表示从头到尾紧密排列。
flex-end 为末端对齐，排列顺序不变，元素之间也没有间隔。
center 为居中排列，排列顺序不变，第一个元素到头部的距离与最后一个元素到尾部距离相等，元素之间没有间隔。
space-between 将所有元素排列好并等距离划分，第一个元素贴着容器头部，最后一个元素贴着容器尾部。
space-around 和space-between的区别在于，第一个和最后一个元素距离边缘的距离多了半个间隔。
space-evenly第一个和最后一个元素距离边缘的间隔为一个间隔。
alignItems表示同一条主轴上的元素在侧轴上的对齐方式
flex-start 元素向侧轴起点对齐。
flex-end 元素向侧轴终点对齐。
center 元素在侧轴居中。如果元素在侧轴上的长度大于其容器，那么在两个方向上溢出距离相同。
stretch 如果没有设置元素的高度或宽度，元素将在侧轴方向被拉伸到与容器相同的高度或宽度。
baseline 元素位于容器的基线上，目前我看到的效果是类似于居中显示的，在nowrap的情况下子元素整体会向侧轴起点对齐然后子元素之间中间对齐，在wrap下和center效果相同（暂时还没发现不同的情况）
alignSelf和alignItems同理，设置的是自身在父容器中的侧轴对齐方式多了一个"auto"属性，表示继承父容器的alignItems属性，alignSelf默认为auto
附加
alignContent只在flexWrap不为nowrap时生效，表示不同主轴的元素在侧轴上的对齐方式，类似于justifyContent
对应的值有 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
其他都与justifyContent相同
stretch会将子元素所在的主轴在侧轴方向拉伸（将没有内容的空白部分均匀分给每一行/列）
用flex调整元素大小
flex值相当于元素在父容器中的大小占比，分母为父容器中所有设置了flex属性且flex不为0的子元素的flex值的总和。
上面简单介绍了一下各个布局属性，单独理解起来不算太难，不过在我尝试组合起来使用时，遇到了一些意想不到的情况。
1. 如果元素超出屏幕且flexWrap为"nowrap"，justifyContent:space-between将失效，space-around会显示出所有元素，后一个元素会对前一个元素产生遮挡（可看作元素间间隔值为负数）。
2. 如果元素超出屏幕且设置flexWrap为"wrap"，alignItems的对齐范围仅限当前行,同时stretch的拉伸也只会拉伸到当前高度最大值
（如果内容只有一行会拉伸到容器高度的一半）。
更正：如果内容只有一行，且没有设置alignContent，会将剩余部分高度的一半大小分给这一行
如果内容多行，设置了alignContent,并且不为flex-... 可能会出问题（比如两行都有拉伸的元素，alignContent设置为space-between或space-around，第二行的内容会超出容器！）
3. flexwrap为wrap时，如果内容只有一行，alignItems的对齐范围为当前行（而不是整个容器）。
- 这在子元素高度相同时，wrap会使得alignItems看上去像失效了一样，但其实并不是这样，在子元素高度不同时会发现其中的区别。
推测：wrap相当于将容器分为多个容器，行高/宽为容器内元素高度/宽度最大值，每个容器的alignItems都使用同样的参数。
这里也是初学RN，如果有错误欢迎指正。
附demo代码文件（github链接） 在app.js中导入使用就能看到效果。（反正也写的不是很好）
