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

上一篇:带动画效果的jQuery手风琴


下一篇:【问题解决方案】CentOS7替换yum的问题:使用yum makecache出现File contains no section headers