flexbox理解

从RN中文网上转载并整理简易布局图解。
图片一张张看得费劲，总结一下：

---

Flexbox分为主轴和交叉轴。
在RN中常用的三个样式属性：flexDirection、alignItems和justifyContent。

flexDirection

flexDirection：主轴方向
column：从上往下↓
row：从左往右→
column-reverse：从下往上↑
row-reverse：从右往左←

justifyContent

justifyContent：主轴方向的对其方式
center：居中。
flex-start：居头。
flex-end：居尾。
space-around：均分。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。
space-between：均分。两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。

alignItems

alignItems：交叉轴方向的对其方式
flex-start：居头。
center：居中。
flex-end：居尾。
stretch：填充。要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸

---

例如下图：

flexbox布局模型

该模型中：
flexDirection主轴方向为从左往右→，值为row
justifyContent属性：flex-start即靠main start对齐，flex-end即靠main end对齐
alignItems属性：flex-start即靠cross start对齐，flex-end即靠cross end对齐