认识Flex布局

在Flex之前我们大部分都在使用文档流，浮动，定位，display inline-block，以及负margin来进行布局，这样做是可以的，但是确实会麻烦一些。

我们都知道块级布局侧重垂直方向，行内布局侧重水平方向，而flex布局是与方向无关的，因为可以使用flex-direction这个属性来改变方向。需要注意的是方向的改变，主轴的也会跟着改变。flex是flexible（灵活，弹性）的简写，因此从字面意思可以理解flex是一个弹性的盒子，它是可以实现空间的自动分配和自动对齐。flex可以适用于简单的线性布局，大部分情况下可以满足的我们的要求。

flex盒子

flex主要包括了flex container和flex item。

flex container的属性包括：（主要介绍常用的属性）

1. flex-direction：方向
   默认row（行），从左到右排列，默认是不换行的，元素变多就会挤在一行（这时候的宽度也会失效），row-reverse行反转。
   column元素从上往下排列，主轴的方向也就变成了垂直方向了。主轴主要是方向决定的。
2. flex-wrap：换行
   默认不换行。
   wrap: 换行，空间不够的时候自动换行，而不是挤在一起。
   wrap-reverse: 换行，元素反转。
3. justify-content：主轴对齐方式
   space-between: 空间分配到元素之间。
   space-around：空间均匀的分配到元素的周围。
   flex-start：往起点靠。
   center:放中间。
4. align-items：副轴对齐方式
   stretch:默认值，把所有的元素伸展开，高度和最高的元素一样。只要stretch延伸，其它属性不延伸。
   flex-start：所有的元素往起点靠。不要延伸。
   center: 往中间靠。
   主轴对齐才有space-between,和space-around，副轴是没有的。想要调整副轴的多行元素，使用属性align-content。
5. align-content： 多行/列内容对齐方式
   默认stretch:元素和空间占比均匀分配。
   space-around:空间均匀分布到空间周围。

flex-items的属性包括：

1. flex-grow：增长比例（空间过多时）
   空间有空余的时候，可以使元素占中间，只要一个元素拥有flex-grow属性，那么这个元素就占掉所有的多余空间。多个元素有flex-grow这个属性，就按照数值的比例平均分配空间，值越大得到的空间就越大。
2. flex-shrink： 收缩比例（空间不够时）
   空间不够的时候，按比例收缩，和上面类似。按比例收缩就是谁缩小的更小，谁缩小的更大的问题。值越大收缩的越大。
3. flex-basis：默认大小
   不写就是按照原来的大小。也可以设置占的空间大小。
4. order：顺序
   改变元素的排列的顺序。
5. align-self：自身的对齐方式
   使某一个元素独立的往中间靠，那么就要使用align-self属性了，这就是让孩子自己选择自己的对齐方式。主要有flex-end，flex-start，center。