ReactNative之flexbox布局

置顶 andr_gale

已于 2022-06-20 17:37:14 修改

阅读量437

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react native基础文章标签： react native javascript 前端

于 2018-06-10 14:15:09 首次发布

本文链接：https://blog.youkuaiyun.com/gzx110304/article/details/80640909

react native基础专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了 ReactNative 中 Flexbox 布局的使用方法，包括伸缩容器的各种属性设置如 flexDirection、flexWrap 和 justifyContent 等，以及伸缩项目的 flex 和 alignSelf 属性，帮助开发者更好地掌握 ReactNative 的布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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:被作用的伸缩项目在交叉轴的结束位置对齐