03-Flexible Box

概念

React-Native 中所有的布局均采用 Flex 布局。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

属性

flex-direction

决定主轴的方向

• column: 垂直方向, 起点在上边。React-Native 默认值，与 Web 不一致。
• column-reverse: 垂直方向，起点在下下边
• row: 水平方向，起点在左边。 Web 默认值
• row-reverse: 水平方向，起点在右边

flex-wrap

子元素宽度超出父容器时，是否要折行，以及如何折行

• nowrap: 默认值, 只排在一行上
• wrap： 超出折到下一行
• wrap-reverse: 超出后，折到上方

justifyContent

子元素沿着主轴的排列方式

• flex-start: 默认值。从主轴起始端开始分布，第一个子元素与主轴起始对齐，同时后续所有子元素分别与前一个对齐
• flex-end: 从主轴末端开始分布,最后一个子元素与主轴末端对齐,同时前面所有子元素分别与后一个对齐。
• center: 所有子元素向主轴中点靠拢.保证第一个子元素距主轴起始端的距离与最后一个子元素距主轴末端的距离相同。
• space-between: 平均分配所有子元素之间的空间,保证相邻子元素之间的距离相同,同时第一个子元素与主轴起始端对齐,最后一个子元素与主轴末端对齐。
• space-around:平均分配所有子元素之间的空间,保证相邻子元素之间的距离相同,同时第一个子元素到主轴起始端的距离与每行最后一个元素到主轴末端的距离是相邻元素之间距离的一半。
• space-evenly:完全平均分布。

alignItems

子元素沿着次轴的排列方式

• flex-start：位于起始端
• flex-end：位于末端
• center: 所有子元素向次轴中点靠拢,如果子元素的总高度高于容器,那么两端溢出距离相同。
• stretch: 子元素在次轴方向上被拉伸到充满容器。

alignSelf

子元素自定义与其他元素不一致的属性，覆盖父元素中的 alignItems。

flex

类似于 Android 中的 Weight，定义当前元素在容器中的占比

参考

• http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html