重点:
1】react native 下的弹性布局名字叫:flexDirection
2】flexDirection的默认值是column
而不是row
,而flex
也只能指定一个数字值。
3】使用flexDirection
、alignItems
和 justifyContent
三个样式属性就已经能满足大多数布局需求
在React-Navive中使用flexbox,目前只支持以下几种属性:
1.alignItems:item在交叉轴上的对齐方式
alignItems:flex-start | flex-end | center | stretch
2.alignSelf:设置item自己在交叉轴上的对齐方式,会覆盖默认的对齐方式
alignSelf: auto | flex-start | flex-end | center | stretch
3.flex
4.flexDirection:定义主轴线的方向
flexDirection:row | column(default)
5.flexWrap:是否换行
flexWrap:wrap | nowrap
6.justifyContent:item在主轴线的对齐方式
justifyContent:flex-start | flex-end | center | space-between | space-around
在线调试弹性布局的网站:https://panw3i.gitee.io/flex/