React-native学习过程 六 flexbox伸缩容器属性

这次开始详细的讲一些很基础常见的属性，我会尽量详细的说清楚的
我先说一些基础知识

这上面有主轴和交叉轴，那是在屏幕默认的位置
1. Flexbox的伸缩容器属性
Flexbox是一种根据轴的顺序来排列控件的布局，他是通过flexDirection来实现的，这里先将容纳控件的属性。
（1） flexDirection
当flexDirection:’row’,控件水平排列，从左到右，这也是系统默认值，不设置这个属性，都默认是这个，例子如下

 <View style={styles.container}>               <Text style={styles.title}>one</Text>               <Text style={styles.year}>two</Text>               <Text style={styles.month}>three</Text>          </View>  container: {    flexDirection:'row',    flex: 1,    justifyContent: 'center',    alignItems: 'center',    paddingLeft:10,    paddingRight:10,    backgroundColor: '#F5FCFF'  },    title: {    fontSize: 30,    margin: 10,    textAlign: 'center',}

接下来也会以这个为模板来讲
当flexDirection:’row-reverse’,这个排列顺序是水平，但是是从右到左的排列
当flexDirection:’column’,控件从上到小排列
当flexDirection:’column-reverse’,控件从下往上排列
（2） flexWrap
当flexWrap:’nowrap’,空间不够，不换行，这是系统默认值，例子如下：

 <View style={styles.container}>               <Text style={styles.title}>one</Text>               <Text style={styles.title}>two</Text>               <Text style={styles.title}>three</Text>               <Text style={styles.title}>four</Text>               <Text style={styles.title}>five</Text>               <Text style={styles.title}>six</Text>          </View>  container: {    flexDirection:'row',    flexWrap:'nowrap',    flex: 1,    justifyContent: 'center',    alignItems: 'center',    paddingLeft:10,    paddingRight:10,    backgroundColor: '#F5FCFF'  },    title: {    fontSize: 30,    margin: 10,    textAlign: 'center',}

当flexWrap:’wrap’,这个就能够自动换行，但是他会把控件放在上方，原本是这是在中心的，所以在使用的时候需要注意
（3） justifyContent
当justifyContent: ‘flex-start’,控件都靠近轴的起始位置，因为flexDirection:’row’，所以可以说是靠近左边，例子如下：

  <View style={styles.container}>               <Text style={styles.title}>one</Text>               <Text style={styles.title}>two</Text>          </View>  container: {    flexDirection:'row',    flexWrap:'nowrap',     justifyContent: 'flex-start',     flex: 1,    alignItems: 'center',    paddingLeft:10,    paddingRight:10,    backgroundColor: '#F5FCFF'  },    title: {    fontSize: 30,    margin: 10,    textAlign: 'center',}

当justifyContent: ‘flex-end’,控件靠近轴的结尾部分
当justifyContent: ‘center’,控件靠近轴的中间
当justifyContent: ‘space-between’,控件均匀分布在轴上面，第一个控件在轴的开始位置，最后一个控件在轴的终点位置
当justifyContent: ‘space-around’,控件均匀分布在轴上面两端都会保持距离，第一个和最后一个都会对边界保持距离
（4） alignItems
当alignItems: ‘flex-start’,向交叉轴起始位置靠近，在当前情况就是在上方，例子如下：

  <View style={styles.container}>               <Text style={styles.title}>one</Text>               <Text style={styles.title}>two</Text>               <Text style={styles.title}>three</Text>          </View>  container: {    flexDirection:'row',     justifyContent: 'space-around',      alignItems: 'flex-start',    flex: 1,    paddingLeft:10,    paddingRight:10,    backgroundColor: '#F5FCFF'  },    title: {    fontSize: 30,    margin: 10,    textAlign: 'center',}

当alignItems: ‘flex-end’,控件向交叉轴下方靠近
当alignItems: ‘center’,控件向交叉轴中心靠近
（5） align-content
这相当于交叉轴的justifyContent属性，它能够赋予的值与justifyContent一样，这里就不多说了

下期再见