组件布局
Flex Direction
一种子组件的排列方式。 使用的是 flexDirection 属性，默认是 column，一共四种：
-
“column”, //从上往下
-
“row”, //从左往右
-
“row-reverse”, //从右往左
-
“column-reverse” //从下往上
Layout Direction
另一种排列方式，使用的是 direction 属性，决定子组件靠左，还是靠右，但不会递归传递下去。
- 一共两种：
-
ltr: 从左往右
-
rtl: 从右往左
-
Justify Content
在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式。
flex-start: 子元素从开始处依次排列。
-
当 flexDirection 为 row时
-
当 flexDirection 为 row-reverse时（因为布局是从右往左的）
flex-end：所有子元素靠结尾处排列
-
当 flexDirection 为 row时(结尾处是右边)
-
当 flexDirection 为 row-reverse时（因为布局是从右往左的, 所以结尾处就是最左边）
center： 所有子元素按总宽度计算后，靠中间一起排列
space-between：第一个和最后一个子元素分别靠开始和结尾，其他子元素平均排列，保证子元素之间距离相同。
space-around: 第一个和最后一个子元素会跟开始和结尾 空一小段，其他子元素平均排列，子元素之间距离相同
space-evenly：所有元素之间距离 以及 首尾元素跟边缘的距离 完全一样。
Align Items
在组件的 style 中指定alignItems可以决定其子元素沿着次轴（如果主轴是row，那么次轴就是 column）的排列方式
-
stretch: 将子元素往次轴方向拉伸，以填满。（要求width不能限定值; 下图里 第一二个元素限定了width:50, 第三个未限定）
-
flex-start: 子元素靠次轴的开始方向布局。（次轴是row，开始方向就是最左边）
-
flex-end：子元素靠次轴的结尾方向布局。
-
center：子元素靠次轴的中间布局。
Align Self
可以将alignSelf 给单独的子元素（可设置的值跟 alignItems 一样），那么该子元素就会遵从 alignSelf的设置而忽略父元素的alignItems。
比如下面例子，第一个元素的alignSelf 设为 stretch, 因此完全忽略了父元素的 center设置。
Flex Wrap
flexWrap 决定子元素在主轴上超过父元素大小时，是否在次轴方向进行换行显示。 默认是no-wrap, 可以设置为 wrap
下面例子里，主轴是 column，然后子元素高度为150， 父元素一列放不下两个子元素，因此往row 方向进行了换行。
