react-native flexbox布局

最新推荐文章于 2024-05-17 09:44:09 发布

一条有梦想的咸鱼$

最新推荐文章于 2024-05-17 09:44:09 发布

阅读量271

点赞数

文章标签： react-native flexbox布局

本文链接：https://blog.csdn.net/aawmx123/article/details/80391134

版权

flexbox布局建议看阮一峰大神的flex布局教程

rn目前主要支持flexbox的如下六个属性

alignItems：用来定义伸缩项目在交叉轴上的对齐方式，语法为：alignItems:flex-start（默认值）| flex-end | center | stretch
alignSelf：用来定义单独的伸缩项目在交叉轴上的对齐方式，可以覆盖alignItems,语法为：alignSelf:auto（默认值）| flex-start| flex-end | center | stretch（伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为垂直方向的话，只有在不设置高度的情况下才能看到效果）
flex：是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flex-basis,其中第二个和第三个参数为可选参数，默认值为:0 1 auto
flexDirection：主轴线的方向语法为：flex Direction：column(默认) | row | roe-reverse | column-reverse
flexWrap:当轴线排不下时是否换行，语法为 flexWrap：noWrap | wrap | wrsp-reverse
justifyContent：垂直轴上的对齐方式，alignItems:flex-start（默认值）| flex-end | center | space-between | space-round

关注