React-Native flexBox_4

4.1 position键

可以绝对定位和相对定位当值为absolute: 可设置 top, bottom, left, right
当值为relative: 只能设置 top, left2.

4.2 flexDirection键

决定了组件内部的子视图排列方向值: column, row两种状态
如下图为css可以四种情况布局: 但rn 只有:上到下 左到右

flexdirection.png

4.3 flexWrap 键

可选值： wrap , nowrap,当子组件以某个方向排下去满了之自动换行

flexWrap.jpg

4.4 justifyContent键

定义方向上如何排列组件(针对行)值: flex - start, flex - end, center, space - between, space - around

JustifyContent.jpg

4.5 alignItems 键

定义方向上如何排列组件(针对列)值: flex - start, flex - end, center, stretch6. alignSelf 键 掉队属性, 一个其中一些组件跳出当前限制

alignItems.jpg

4.6 alignSelf 键

掉队属性, 一个其中一些组件跳出当前属性限制