Flex布局

之前其实在一篇文章中是有提过的，这里也再去做下总结，之前我们使用CSS进行布局的时候其实用到的就是绝对定位相对定位，父标签是相对定位，子标签用绝对定位，以及浮动之类的知识，然后这里再介绍下另外的一种方法就是Flex布局。

其实Flex的意思就是弹性布局，当我们把控件的display属性设置为Flex布局以后，子元素的float、clear和vertical-align属性将失效。其中clear 属性规定元素的哪一侧不允许其他浮动元素。比如说如果是clear both就是左右侧均不允许出现浮动元素。它现在已经被大多数浏览器所兼容。

在Flex布局中有两个概念是必须要知道的，一个就是主轴和侧轴,官网文档称为次轴，在Web开发中这个的右边的蓝色框是和前面那个在同一行还是在下一行其实是根据这两个是行内元素，还是块级元素还是行内块级元素来决定的，当我们采用了flex-box的布局方式，设置了布局是为flex的时候，就是根据你的设置一些alignItems和justifyContent这些来决定了。

如果在flex布局里面，这个蓝色的组件可以在左边的组件的右边那么久说明主轴是向右的，主轴向右是什么意思？如下图所示，主轴和侧轴是垂直的，当我们设置了主轴方向为从左往右，侧轴方向就默认为从上到下。我们先了解下flexWrap，这个默认值是nowrap，就是如果第一行显示不下也不换行，但如果是wrap的话，如果显示不下就换行，所以我们如果要再去放第三个组件的话其实也是有依据它的。如果主轴方向已经向右了，以及侧轴是向下的，而且flexWrap是wrap的那么这个组件就会在下一行去显示。

当我们将代码修改成这样子的时候

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>

        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>

       <View>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
       </View>

        <View>
          <Text style={styles.instructions1}>
            哈哈
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor:'red',
    top:50,
    height:100,
  },
  instructions: {
     backgroundColor:'blue',
  },
  instructions1:{
    backgroundColor:'green',
    height:50,
  },
});

会出现这样的样式，因为主轴默认是垂直向下的，而侧轴是从左往右的

我们可以在样式表中应该是去修改最外层的父组件的主轴的方向，因为我们是要在父组件里面进行布局的，我们要通过flexDirection去修改为从左往右

const styles = StyleSheet.create({
  container: {
    backgroundColor:'red',
    top:50,
    height:100,
    flexDirection:'row',

  },

就会变成下面这样的样式，从左往右显示了

如果我们这个时候给哈哈这个所属的text组件的宽度变大了以及设置了最外层的父组件的flexwrap为Wrap就会换行，也就是说把container的样式设置为了，其实就是多加了个flexWrap:'wrap'

container: {
    backgroundColor:'red',
    top:50,
    height:100,
    flexDirection:'row',
    flexWrap:'wrap',
  },

这里对于主轴方向flexDirection总结一下，

这个属性值默认是column这个，也就是从上往下

还有就是row，这个就是从左往右

以及row-reverse是从右往左

最后是column-reverse就是从下往左。

接下来我们可以去设置主轴的对齐方式,可以通过下面的来设置，其中flex-start指的就是对齐主轴的起点。

justifyContent:'flex-start'

也就是默认就是这样，我们可以看到右边是有空隙的，也就是向左对齐了。

但如果是设置为了justifyContent:'flex-end'这样的样式就会向右对齐主轴的终点，左边是有空隙也就是向右对齐了，

如果是space-between就会两端对齐，中间有空隙。其实就是在每行上均匀分配元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

还有个是space-around，在每行上均匀分配元素。相邻元素间距离相同。每行的第一个元素到行首的距离和每行最后一个元素到行尾的距离是相邻元素之间距离的一半

紧接着是center，居中显示，每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同

这里改了下内容改成了

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>

        <View>
        <Text style={styles.welcome}>
          Welcome to
        </Text>
        </View>

       <View>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
       </View>

        <View>
          <Text style={styles.instructions1}>
            哈哈
          </Text>
        </View>

      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor:'red',
    top:50,
    height:100,
    flexDirection:'row',
    alignItems:'flex-start'
  },
  instructions: {
     backgroundColor:'blue',
  },
  instructions1:{
    backgroundColor:'green',
    height:50,

  },
  welcome:{
    backgroundColor:'purple',
  }
});

这里去设置了侧轴为flex-start其实也就是和侧轴的起始点对齐

但是如果我们设置的是flex-end的话是底部对齐

如果是center就是居中

设置侧轴也就是alignItems默认的属性值是stretch，看着好像和flex-start差不多，但其实是有差别的，就是如果是stretch的话如果你子组件没有设置高度或者高度为auto的话，那么就会默认占据父组件的所有的高度，stretch会使元素被拉伸以适应容器

比如说我把哈哈这个text外码的View那层父控件给删掉，然后再把之前给text设置的高度给删掉，这个时候它的父控件是最外层的父控件，就会发现变成了占据父控件的宽度了。

然后再去介绍个flex，这里我们是设置了这样的内容

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>

        <Text style={styles.welcome}>
          Welcome to
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>

          <Text style={styles.instructions1}>
            哈哈
          </Text>

      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor:'red',
    top:50,
    height:100,
    flexDirection:'row',
    alignItems:'stretch',
    flexWrap:'wrap',
  },
  instructions: {
     backgroundColor:'blue',
    flex:2,
  },
  instructions1:{
    backgroundColor:'green',
    flex:2,

  },
  welcome:{
    backgroundColor:'purple',
    flex:1,
  }
});

比方说我们下面的三个组件的样式设置的为1，2，2 那么它们就分别占据父组件的1/5 2/5 2/5

如果我们想设置一个元素的侧轴排布，我们就要去设置alignSelf，alignSelf决定了元素在父元素的侧轴方向的排列方式（这个样式设置在子元素上），它设置的值会覆盖父元素的alignItems的值。其表现和CSS上的align-self一致。

有这么几个属性值'auto', 'flex-start', 'flex-end', 'center', 'stretch' 默认为auto。其他的和上面的一样，也都做了介绍