1 Flexbox布局
1) flexDirection
可以决定布局的主轴,子元素是应该沿着水平轴(row)方向排列,还是沿着竖直轴(column)方向排列
2) justifyContent
决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式
有flex-start、center、flex-end、space-around、space-between以及space-evenly
3) alignItems
子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布,可选项有:flex-start、center、flex-end以及stretch,这里strech是延伸的意思
2 简单代码测试
render() {
return (
<View style={{flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch',}}>
<View style={{height: 50, backgroundColor: 'powderblue'}} />
<View style={{height: 50, backgroundColor: 'skyblue'}} />
<View style={{height: 100, backgroundColor: 'steelblue'}} />
</View>
);
}