持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第决16天
Flex:flexible Box的缩写，表示弹性布局，任何一个容器都可以作为flex布局。
当我们给父元素盒子使用flex布局时，它的子元素里的float，clear以及vertical align都会失效。
为什么要用flex布局？ 有很多同学问了，不是有浮动布局吗？为什么还有flex布局？
那是因为flex布局相对于浮动布局来说，操作方便，布局简单，在移动端应用广泛。 但是在pc端讲究浏览器的兼容性。
采用了flex布局我们一般称它为flex容器（flex container）简称为容器，它里面的所有子元素都会称为flex项目（flex item），简称项目。项目可以在容器里面横向排列，也可以竖向排列。默认是横向排列。
flex原理就是通过给父元素添加flex元素，来控制子元素的位置和排列方式，就类似于携天子以令诸侯。
flex-direction:设置主轴方向
默认的主轴方向是x轴方向，水平向右方向。那此时侧轴就成Y轴。
flex-direction的属性有四个，分别是row，row-reverse，column，colum-reverse
1，flex-direction:row（默认从左到右1,2,3水平排列）
下面我们来看下flex-direction:row的具体用法：
要注意的是，span不需要转换成块元素就能设置宽高了，因为flex的原因。
2，flex-direction:row-reverse（从右往左1,2,3水平排列）
既然盒子能从左往右水平排列，那它能不能从右往左排列呢？
当然是没问题的。只需要把row属性改成row-reverse就行了，如图所示：
3， flex-direction: column（从上往下1，2,3垂直排列）
当我们把主轴设置为Y轴时，那侧轴就成了x轴。
4，flex-direction:column-reverse（从下往上3,2,1垂直排列 ）
5， justify-content设置主轴上子元素的排列方式
justify-content有以下几种属性：flex-start，flex-end，center，space-around， space-between，space-evenly。
flex-start（从头部开始）
如果主轴是X轴的话，那么子元素的排列方式就是沿着x轴从左往右1,2,3排列。
flex-end（从尾部开始）
如果主轴是X轴的话，那么子元素的排列方式就是沿着x轴顺序不变，从右往左3,2,1排列
如果主轴是y轴的话，那么子元素的排列方式就是沿着x轴从上往下1,2，3排列
如果主轴是y轴的话，那么子元素的排列方式就是沿着x轴从下上3,2，1排列
justify-content: center(在主轴居中对齐）
如果主轴是x轴的话，那么子元素的排列方式沿着x轴居中对齐：
如果主轴是y轴的话，那么子元素的排列方式沿着y轴居中对齐：
justify-content: space-around（两边对齐，项目中间间隔相等）
主轴是x轴，盒子的两边间距相等且小于盒子与盒子之间的距离。
主轴是y轴，盒子的两边间距相等且小于盒子与盒子之间的距离。
justify-content: space-between(平分间距且左右两边盒子贴边）
主轴是x轴，最左边和最右边的盒子贴边，盒子的间距都相同
主轴是y轴，最上边和最下边的盒子贴边，盒子的间距都相同
justify-content: space-evenly（项目和项目之间的距离和项目与边框的距离相等）
主轴是x轴
主轴是Y轴
flex-wrap设置子元素是否换行
flex-wrap:nowrap (不换行，系统默认值）
flex-wrap:nowrap是默认值，意思是不换行的意思，以x轴为主轴，从上图中可以看出我们的盒子因为flex-wrap:nowrap的原因，不能换行，导致项目盒子变小了。
flex-wrap:wrap (换行，第一行在上面）
以x轴为主轴，从上图中可以看出正常情况下如果添加了换行属性的话，一行最多容纳4个盒子，剩下的两个盒子则要换行。
flex-wrap:wrap-reverse (换行，第一行在下面）
以x轴为主轴，从上图中可以看出，原先的1,2,3,4盒子已经排列到了下面，而5,6盒子则是排列在了上面
align-items设置侧轴上的子元素排列（单行）
如果我们要想实现盒子水平且垂直居中的话，那我们之前主轴居中显然是不能实现的，必须要设置侧轴上的子元素排列。
当主轴设置为x轴时， 我们先设置主轴水平居中，再设置侧轴上的子元素居中：
当主轴设置为y轴时， 我们先设置主轴水平居中，再设置侧轴上的子元素居中：
