FlexBox规划
直接浏览大神文章:阮一峰写的FlexBox规划。在react-native中道理是一样的,只不过可能有写属性在react-native中简化了。
有几个注重的点,我在刚刚开始flexbox中总结的:
容器(container)属性
flexDirection ,justifyContent,alignItems
flexDirection flex规划体式格局
justifyContent 主轴对齐体式格局
alignItems 交织轴对齐体式格局
这里须要特别注重的就是主轴和交织轴。以下举详细示例申明:
flexDirection:'column'(默认值)
,垂直居中对齐:justifyContent:'center'
,程度居中对齐:alignItems:'center'
flexDirection:'row'
,垂直居中对齐:alignItems:'center'
,程度居中对齐:justifyContent:'center'
项目(item)属性
flex
为何设置
flex:1
占满全部容器
许多时刻我们常常直接写flex:1
占满全部容器,那为何写flex:1
,不写flex:2
或许flex:3
呢?起首我们要相识flex属性是比例值,假定如今有两个项目,离别设置属性flex:1
,flex:2
,那末第一项就占有全部容器的1/3
,第二项占有全部容器2/3
。这下晓得为何flex:1
占满全部容器了吧,由于是1/1
。所以假如容器只要一个项目那末flex:1
,flex:2
,flex:3
都是占满全部容器,由于离别的意义是:1/1
,2/2
,3/3
。特别注重flex:1的作用对象是主轴
在flexDirection:'row'
中设置flex:1
,是程度方向上占满全部容器。在flexDirection:'column'
中设置flex:1
,是垂直方向上占满全部容器。