React Native与Flexbox弹性盒子布局 (八)

知识列表：

样式参考指南： https://github.com/doyoe/react-native-stylesheet-guide

1. flex: 1, 盒子显示主轴方向的剩余空间。默认为0

盒子中同级元素显示的高或者宽的比例，flexDirection: 'row'则是宽比。

如A1,A2,A3三个的flex值分别为1, 1, 2. 则他们的宽或者高显示的值比例为1:1:2

2. flexDirection: 'row' 或者'column'. 为'row'时，横线则为主轴，竖线则为交叉轴。

3. flexWrap: 'wrap', 'nowrap', 是否对超出的部分进行换行。

4. justifyContent: 盒子沿主轴线对齐方式。

5. alignItems: 盒子沿交叉轴对齐方式。

6. alignSelf: 内部盒子对自己本身做的对齐方式

效果演示：

1. flex: 

如下：box1与box2设置了flex, 则二者根据比例：1：2 显示除没有设置的box3的剩余空间。

2. flexDirection: 

有row与column,  当为row时，则横向显示。column时竖向显示：

3. 

3. flexWrap: 默认是nowrap

wrap时如下：

4. justifyContent， 主轴方向对齐方式：flexDirection=='row'时，横线为主轴

flex-start, flex-end, center, space-between, space-around

space-between:

space-around:

5.  alignItems: 交叉轴对齐方式， 默认是stretch，如果内部盒子没定义交叉方向的长或高度，则不受影响

flex-start, flex-end, center, stretch

stretch如下：

6. alignSelf 内部盒子的交叉轴方向对齐方式，

auto, flex-start, flex-end, center, stretch

auto默认值， 自身设置了高或宽度，则按设置的显示，否则按stretch显示