首页 > 其他 > 详细

React Native,flexbox布局

时间:2018-06-25 23:59:18      阅读:339      评论:0      收藏:0      [点我收藏+]

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

React Native,flexbox布局

原文:https://www.cnblogs.com/yibinpan/p/9226830.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!