iOS学习React-Native 的flexbox布局

FlexBox布局

属性1:flexDirection

row:按行进行排列

column:按列进行排列

属性2:justifyContent-在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。

flex-start：伸缩项目与父容器左端靠齐。

flex-end：与父容器右端靠齐。

center：水平居中。

space-between：第一个子组件位于父容器左端，最后一个子组件位于父容器最右端。然后平均分配在父容器水平方向上。

space-around：所有子组件平均分配在父容器的水平方向上，左右都有留隙。

属性3:alignItems -决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式

flex-start：与父组件的顶部对齐

flex-end：与父组件的底部对齐

center：处于父容器的中间位置

stretch：竖直上填充整个容器

属性4:alignSelf-设置子控件自身在父控件的对齐方式

auto:按照自身设置的宽高来显示，如果没设置，效果跟streth一样。

flex-start:与父容器顶部对齐。

flex-end:与父容器底部对齐。

center:位于垂直位置。

streth:垂直拉伸。

属性4: flex-设置伸缩项目的伸缩样式

如果在同一个父控件中,没设置宽度的几个控件按行排列,设置flex为1，2，4

flex为2的组件宽度为flex为1宽度的两倍，flex为4组件宽度则为flex为1的组件宽度的4倍。

---

---

---

---

解释：justifyContent指顺着指定的主轴进行排列－－可以理解为如果指定主轴（即derection）为row，即为子控件在X轴上面一个一个依次排列，并且在X轴上面的排列方式为指定的方式。

例：指定direction为row，jsutifyContent为center，alignItems为center。我理解的是把3个控件放好，放好后看作一个整体，放在主轴的中心（center），次轴的中心（center）

例：指定direction为row，jsutifyContent为flex－start，alignItems为center。我理解的是把3个控件放好，放好后看作一个整体，放在主轴的左边（flex－start），次轴的中心（center）