准备大招中......

首先我们来了解一下flex布局。

flex布局是在2009年由W3C组织提出的一种全新的布局方案。这种布局方案可以解决传统页面无法伸缩的问题，相比传统的盒子布局，flex更加灵活。
引入flex布局模型的目的就是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐、空白空间分配。即便容器中的条目的尺寸未知或是动态变化的，flex布局模型也能正常工作。在flexBox布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来恰当的填充所有可用的空间，当容器的尺寸由于屏幕大小或者窗口尺寸发生变化时，其中包含的条目也会动态的调整。

image.png

正如上图一样，flex布局主要是由两条互相垂直的坐标轴组成，分别就是主轴和交叉轴。但具体哪条是主轴并不是确定的，需要我们来自己定义，
所以在正常情况下，我们在使用的时候，首先先来定义主轴的方向，例如定义水平方向的轴为主轴，那么垂直方向就是交叉轴，或者定义垂直方向为主轴，那么水平方向就是交叉轴。

容器内的条目可以是一行或者多行。而主轴就是确定了每一行里面所有条目的排列方向，而交叉轴确定的就是行本身的排列方向。

再简单一点来说就是所有的布局都是父视图与子视图的关系，我们要确定的就是首先要确定的就是子视图再父视图上是横着排列还是竖着排列，这个时候就需要我们来确定垂直轴和水平轴哪个是主轴。如果是横向排列，那么水平轴就是主轴，垂直轴就是交叉轴，如果竖向排，那么垂直轴就是主轴，水平轴就是交叉轴。

在我们确定完主轴与交叉轴之后，我们还需要确定一个东西，那就是在主轴上的东西我们是要从前往后排还是从后往前排。交叉轴也一样，是从上往下，还是从下往上，（这个地方我们以水平轴为主轴举例，反之一样），而这个排列方式的起始我们就叫它主轴起始、主轴结束、交叉轴起始、交叉轴结束。

好了，关于主轴交叉轴的定义就这样，不懂多读几遍。。。。

上面扯了一大堆，到底该咋写还是不知道。。

接下来就是该咋写。。

flexBox布局属性

常用的几个布局属性有

flexDirection:这个属性控制的就是主轴的方向。

row: 默认值，主轴的方向为从左到右排列
row-reverse: 和row的方向相反，从右到左排列
column: 从上到下排列
colume-reverse: 从下到上排列

flexDirection.jpg

flexWrap:这个属性用来控制伸缩容器内是单行还是多行。同时也确定了交叉轴的方向。

nowrap:默认值，伸缩容器内单行显示。
wrap:伸缩容易内多行显示。由上到下排列
wrap-reverse:伸缩容器内多行反向显示，反向指的是从下到上排列。

下面是flexDirection为row的例子。

未标题-1.jpg

下面是flexDirection为column的例子。

未标题-1.jpg

justifyContent:这个属性定义了伸缩项目在主轴上的对齐方式。

flex-start:伸缩项目以主轴的起始位置开始对齐，后面的每个元素紧挨着前一个元素对齐。
flex-end:伸缩项目以主轴的结束位置对齐，前面的每个元素紧挨着后一个元素对齐。
center:伸缩项目互相对齐并在主轴上处于居中，并且第一个元素到主轴起点的距离等于最后一个元素到主轴终点的距离。
space-between:伸缩项目平均分配主轴上，第一个元素和主轴的起点紧挨，最后一个元素和主轴的终点紧挨，中间剩下的伸缩项目进行平分。
space-around:伸缩项目平均分配在主轴上。第一个元素到主轴的起点距离和最后一个元素到主轴的终点距离相等，且等于中间元素两两的间距的一半，完美地平均分配