ReactNative之flexbox布局

ReactNative之flexbox布局

一.伸缩容器属性

1.flexDirection属性

flexDirection属性用于指定伸缩项目在伸缩容器中的排列方向,也就是主轴的方向,它的取值有如下几种情况:
1.row:主轴为水平轴,伸缩项目在伸缩容器中从左向右排列
2.row-reverse:主轴为水平轴,伸缩项目在伸缩容器中从右向左排列
3.column:主轴为竖直轴,伸缩项目在伸缩容器中从上向下排列
4.column-reverse:主轴为竖直轴,伸缩项目在伸缩容器中从下向上排列

2.flexWrap属性

flexWrap属性用于指定伸缩容器在主轴线方向空间不足的情况下,是否换行,取值如下:
1.nowrap:即使伸缩容器在主轴线方向空间不足也不换行
2.wrap:伸缩容器在主轴线方向空间不足时,自动换行

3.justifyContent属性

justifyContent属性用于指定伸缩项目在主轴方向上的对齐方式,取值如下:
1.flex-start:伸缩项目沿主轴线的起始位置对齐
2.flex-end:伸缩项目沿主轴线的主轴线的结束位置对齐
3.center:伸缩项目沿主轴线的主轴线的中间位置对齐
4.space-between:伸缩项目平均分布在主轴线上,两端不保留空间
5.space-around:伸缩项目平均分布在主轴线上,两端保留两个元素间隔的一半的空间

4.alignItems属性

alignItems属性用于指定伸缩项目在交叉轴上的对齐方式(交叉轴是与主轴垂直的轴),取值如下:
1.flex-start:伸缩项目沿交叉轴的起始位置对齐
2.flex-end:伸缩项目沿交叉轴的结束位置对齐
3.center:伸缩项目沿交叉轴的中间位置对齐
4.stretch:伸缩项目在交叉轴方向被拉伸到与伸缩容器相同的高度或宽度

二.伸缩项目属性

1.flex属性

flex属性用于指定伸缩项目在主轴方向的放大比例,取值为整数,取值越大,所占的比例越大

2.alignSelf属性

alignSelf属性用于指定单独的伸缩项目在交叉轴方向上的对齐方式,取值如下:
1.auto:被作用的伸缩项目继承了其伸缩容器的alignItems属性
2.stretch:被作用的伸缩项目在交叉轴方向被拉伸到与伸缩容器相同的宽或高
3.center:被作用的伸缩项目在交叉轴的中间位置对齐
4.flex-start:被作用的伸缩项目在交叉轴的开始位置对齐
5.flex-end:被作用的伸缩项目在交叉轴的结束位置对齐