React Native，flexbox布局

Posted 2020-11-20 yibinpan

Flexbox布局

 flex：使组件在可利用的空间内动态地扩张或收缩。flex：1会使组件撑满空间。当有多个组件都指定了flex的值，那么谁的flex值大谁占得空间就大，占得大小的比例就是flex值的比例。

 

flexDirection:决定子元素的排列方向（纵向或者横向），手机中默认是纵向，有两个值，column或者row

 

 justifyContent:决定子元素沿主轴的排列方式，决定子元素是靠近主轴的起始端、末尾端、中间、还是均匀分布，有几个可选项，flex-start,center,flex-end,space-around,space-between

 

alignItems：决定子元素沿次轴的排列方式（如果主轴方向是column，那么次轴方向就是row），以主轴方向为column举例，可以决定靠左、居中、还是靠右，flex-start,stretch,flex-end

 

总结一下：

 flex参数决定组件本身在父组件中的排列方式。

 flexDirection, justifyContent, alignItems决定子元素的排列方式。