对Flex的小结
弹性盒模型（flex），我们一般用来实现页面的布局，当然flex的用法是非常灵活的，除了多个块盒水平排列，我们还可以用flex针对同一行的多个行盒在水平和垂直方向的排列效果，比如一行多个span标签，我们想让其水平对齐，就可以添加display属性值为flex，然后justify-content取值space-between，即可实现，包括水平方向，我们想让不同高度的盒子垂直居中，可以使用align-items或者align-content，属性值为center即可实现，当然如果需要其他效果，可以取不同的属性值和属性。
设置display属性为flex（弹性盒子模型），先是常规块盒的排列方式如下：
设置Display属性值为flex后，块级元素也能实现水平排列：
容器的属性
1、flex-direction决定子元素的排列方向（即项目的排列方向）
取值1：row默认值，主轴为水平方向,子元素从左向右排列；
取值2：row-reverse：主轴为水平方向，起点在容器的右端，反序排列（flex-direction: row-reverse;）；
取值3：column,交叉轴排列（flex-direction: column;）
取值4：column-reverse；让盒子在交叉轴实现反序排列（flex-direction: column-reverse;）
2、flex-wrap规定如果一行放不下如何换行。
当元素总宽度大于容器宽度时，就会涉及到换行与否，默认情况下容器里变得额所有项目都排在一条线上，flex-wrap定义如果一行排不下 如何换行。它可能的值有三个：
（1）nowrap（默认）：不换行。即使是盒子的总宽度大于容器宽度也不会换行
（2）wrap：换行，超出的部分，会自动换行而不会挤压（flex-wrap: wrap;）
（3）wrap-reverse：换行，不仅会换行，而且会反序从下往上排列。（flex-wrap: wrap-reverse;）
justify-content定义在主轴上的对## 标题齐方式
justify-content 定义了项目在主轴上的对齐方式。它可能的值有6个：
（1）flex-start（默认值）向主轴的起始位置对齐，也就是从主轴的起始位置开始排列。（justify-content: flex-start;）
（2）flex-end：向主轴结束位置对齐，因此会抵到主轴的终点，但并不影响元素的排列顺序。（justify-content:flex-end;）
（3）center： 居中，主轴方向上居中显示（justify-content:center;）
（4）space-between;两端对齐，需要注意的是元素会左右两端都抵靠在容器左右两侧，剩下的空间（主轴方向上）由剩余的元素平均分配。（justify-content:space-between;）
（5）space-around;分散对齐，需要注意的是元素不会左右两端都抵靠在容器左右两侧（注意区分和两端对齐以及平均对齐的区别），容器中剩下的空间（主轴方向上）由元素平均分配到自己的主轴方向开始和结束（注意主轴方向是水平还是垂直的）两侧（因此左右两边元素与容器边缘的距离只有元素之间距离的一半）。（justify-content:space-between;）
（6）space-evenly;平均分配，就是把所有容器主轴方向上的剩余空间都平均分配；和分散对齐的区别是，每个元素之间的距离以及主轴方向开始和结束两侧的元素与容器边缘间的距离都是一样的大的。（justify-content:space-evenly;）
align-items定义项目在交叉轴（纵轴）上如何对齐
align-items属性定义项目在交叉轴（同样注意主轴方向是否已经发生改变）上如何对齐。它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
（1）flex-start：交叉轴的起点对齐（也是默认值）。（align-items: flex-start;）
（2）flex-end：交叉轴的终点对齐。（align-items: flex-end;）
(3) center; 交叉轴方向中心对齐；（align-items:center）
align-content定义了多根轴线（多行）的对齐方式
（1）flex-start：交叉轴的起点对齐；（align-content: flex-start;）
（2）flex-end：交叉轴的肿点对齐；（align-content: flex-end;）
（3）center; 交叉轴的中点；（align-content: center;）
（4）space-around;分散对齐，需要注意的是元素不会交叉轴两端都抵靠在容器两侧（注意区分和两端对齐以及平均对齐的区别），容器中剩下的空间（交叉轴方向上）由元素平均分配到自己的交叉轴方向开始和结束（注意交叉轴方向是水平还是垂直的）两侧（因此交叉轴两边元素与容器边缘的距离只有元素之间距离的一半）。（align-content:space-between;）
（5）space-between;两端对齐，需要注意的是项目会交叉轴两端都抵靠在容器左右两侧，剩下的空间（主轴方向上）由剩余的元素平均分配。。（align-content:space-between;）
（6）space-evenly;平均分配，就是把所有容器交叉轴方向上的剩余空间都平均分配；和分散对齐的区别是，每个项目之间的距离以及交叉轴方向开始和结束两侧的项目与容器边缘间的距离都是一样的大的。（align-content:space-evenly;）
项目的属性
1、flex-grow;默认值为0，设置在flex容器的子项目上，用于瓜分父容器的剩余空间，取值可以我们设置，各个项目之间取值越大分配权重越高。
比如项目在容器中本来按照如下方式排列（未撑满容器）
假入给盒子3设置flex-grow值为1，盒子3就会在主轴上撑满容器剩余的空间（ flex-grow: 1;下图所示）
2、order属性，定义了项目的排序，数值越小，排列越靠前，默认值是0，比如我们给盒子3属性值1，给盒子2属性值为2，盒子4为3，盒子1为4，这样子盒子的排列顺序会由1234变为3241。
3、flex-shrink属性，定义了项目的缩小比例，默认值为1，如果所有的项目该属性值都为默认的1，当空间不足时，都将等比例缩小。如果其中一个项目的该属性值为0，其他默认1，则当空间不足时，前者不缩小。（负值对该属性无效），如下图所示，盒子4的flex-shrink属性值设为0，其他盒子为默认的1，则当空间不足时，盒子4不缩小。
4、flex-basis属性，定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性来计算主轴是否有足够的剩余空间。默认值auto（项目本来的大小）。
5、flex属性，该属性是flex-grow，flex-shrink和flex-basis的简写，默认值0 1 auto，后两个值可以根据自己的需要选择给值还是不给（默认），同时也要注意他们之间的顺序。
6、align-self属性，该属性设置给单个的项目，允许单个项目可以和其他项目有不同的排列方式（权重大于align-item属性，默认值auto）。
