React-native学习过程 七 flexbox伸缩项目属性

今天继续讲react-native的flexbox布局

这次讲的是flexbox的项目属性

（1） flexGrow

这是定义伸缩项目的放大比例，它的意思是因为布局很大，项目一般用不完，所以会有空余的地方，这个属性使来根据这个属性的值来分配空余的地方，

这个属性默认是0，使用例子如下：

<View style={styles.container}>
<Text style={styles.title1}>one</Text>
<Text style={styles.title2}>two</Text>
<Text style={styles.title3}>three</Text>
</View>

container: {

flexDirection:'row',
justifyContent: 'space-around',
alignItems: 'center',

flex: 1,

paddingLeft:10,
paddingRight:10,
backgroundColor: '#F5FCFF'
},

title1: {
fontSize: 30,
margin: 10,
textAlign: 'center',
flexGrow:1
},
title2: {
fontSize: 30,
margin: 10,
textAlign: 'center',
flexGrow:2
},
title3: {
fontSize: 30,
margin: 10,
textAlign: 'center',
flexGrow:3
},

（2） alignSelf

这是用来单独对项目设置在交叉轴上的对齐方式，可以覆盖容器设置的属性

当alignSelf:’auto’,它是按照自身宽高显示，也可以说是随容器设置，使用例子如下：

<View style={styles.container}>
<Text style={styles.title1}>one</Text>
<Text style={styles.title2}>two</Text>
<Text style={styles.title3}>three</Text>
</View>

container: {

flexDirection:'row',
justifyContent: 'space-around',
alignItems: 'center',
flexWrap:'wrap',

flex: 1,

paddingLeft:10,
paddingRight:10,
backgroundColor: '#F5FCFF'
},

title1: {
fontSize: 30,
margin: 10,
textAlign: 'center',
alignSelf:'auto',
},
title2: {
fontSize: 30,
margin: 10,
textAlign: 'center',
},
title3: {
fontSize: 30,
margin: 10,
textAlign: 'center',
},

当alignSelf:’flex-start’,项目靠近交叉轴起始位置

当alignSelf:’flex-end’,项目靠近交叉轴结束部分

当alignSelf:’center’,项目靠近交叉轴中间部分

当alignSelf:’baseline’,项目按基线对其，使用例子如下：

<View style={styles.container}>
<Text style={styles.title1}>one</Text>
<Text style={styles.title2}>two</Text>
<Text style={styles.title3}>three</Text>
</View>

container: {

flexDirection:'row',
justifyContent: 'space-around',
alignItems: 'center',
flexWrap:'wrap',

flex: 1,

paddingLeft:10,
paddingRight:10,
backgroundColor: '#F5FCFF'
},

title1: {
fontSize: 60,
margin: 10,
textAlign: 'center',
alignSelf:'baseline',
},
title2: {
fontSize: 40,
margin: 10,
textAlign: 'center',
},
title3: {
fontSize: 20,
margin: 10,
textAlign: 'center',
},

讲完了，下期再见