React Native,flexbox布局

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决定子元素的排列方式。

猜你喜欢

转载自www.cnblogs.com/yibinpan/p/9226830.html