react native flexbox布局

一：容器属性

1) flexDirection :决定主轴的排列方向

value：‘row|row-reverse|column|column-reverse'   在rn中默认是column

2)justifyContent：子项目在主轴上的对齐方式

value：’flex-start|flex-end|center|space-between|space-around‘ 默认是 flex-start

当主轴为row时

3) alignItems：定义子项目在侧轴（垂直于主轴）的对其方式 默认是strecth(如果子项目未设置高度或者为auto 将占满整个容器的高度)

value：'flex-start|flex-end|center|stretch|baseline' (baseline 在rn中不适用)

当主轴为row时

4) flexWrap：默认情况下，子项目都是在一行内显示。该属性定义：如果一条轴线排不下，如何换行

value：‘nowrap|wrap|wrap-reverse’  默认值nowrap不换行

wrap-reverse:换行 第一排在下方 在rn中不适用

5) flex：在子项目上设置 表示除开其他项目宽度后 剩余的空间 该子项目占据多少

表示将父容器分为了7份 后面是各自占的比重

6）alignSelf：允许单个子项目与其他子项目不一样的对齐方式，可覆盖alignItems属性

value：'auto|flex-start|flex-end|center|baseline|stretch'