React Native Flex 属性

2018-03-02  本文已影响13人  小如99

以下为部分flex属性详解

flexDirection:'row', 
改变主轴的方向 --> 默认是垂直方向
column         从上到下
column-reverse 从下到上
row            从左往右
row-reverse    从右往左


justifyContent:'space-around',
设置主轴的对齐方式
flex-start 对齐主轴的起点位置
flex-end   对齐主轴的终点位置
space-between 两端对齐
space-around  平均分配

alignItems:'stretch',
设置侧轴的对齐方式
默认值:stretch  如果没有设置高度,或者高度为auto,子控件就占满父控件

flexWrap:'wrap',
主轴显示不下,换一行
默认值:nowrap 不换行

flex:1
子控件占父控件的比例,如果三个并列的子控件flex为1,1,1,则长度各占1/3,如果是1,2,3,4 则长度各占1/10,2/10,3/10,4/10

alignSelf:'flex-start'
这个属性可以覆盖alignItems
默认为 auto 标示继承父标签的属性'auto', 'flex-start', 'flex-end', 'center', 'stretch'
上一篇下一篇

猜你喜欢

热点阅读