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',  },

讲完了，下期再见