弹性盒子 flex
虽然很多pc端会用float来排版，但是就让 float 成为时代的眼泪吧，迎接一个更新更好更方便的弹性盒 flex 的布局模式吧。
父元素中写上display:flex ，可以让它的子元素都变成弹性元素，显示上是横着排成一列。
flex-direction:row 排列方式，默认是 row 行，横向排列，row-reverse 是行反向排列，也就是倒着排。此外还有 column 和 column-reverse 是列和列反向排列，就是纵向排列。
flex 的两个轴
主轴（main / primary）和交叉轴（cross / secondary），也有叫主轴和副轴的，这两个轴的方向取决于排列方式。
- 如果排列方式是行排列，那么主轴就是横向水平向右，交叉轴是纵向垂直向下
- 如果是列排列，那么主轴是垂直向下，交叉轴横向向右
justify-content 用来设置主轴对齐方式
- 属性值
flex-start从开始部分对齐 flex-end从结束部分对齐center在主轴上居中space-evenly所有空间平分（首尾的空间也参与平分，所有的空间都是1）space-between人如其名，只有在“之间”的空间会被平分，首尾两头的空间不平分。space-around和 evenly 很像，但是它的首尾不是平分的1，而是0.5
space-evenly 在ie上不兼容，如果想达到一样的效果的话，可以采用space-between 然后在容器上加before和after的伪元素
.content::before,.content::after{
content:'';
display:block;
}
align-items 用来设置交叉轴对齐方式，属性值和justify-content 基本一致
align-content 交叉轴内容对齐，这个属性只有在容器内有多行内容才会生效。可是无论给容器塞多少元素，它都会自动调整宽度来适应容器，元素变得很瘦而且挤到一行，怎么样才能让它们换行呢？
flex-wrap 属性默认属性值nowrap 不换行，可以改成wrap 换行，就可以产生多行内容啦。元素们会维持自身本来的宽度自动的换行。
换行后，发现原先设置的排版怪怪的，居中感觉也不是很居中的样子。这时候使用 align-content:center 它会将这多行内容作为一个整体继续居中，这时候再看显示形式就很舒服了。
来看看设置在弹性盒中弹性元素上的一些属性
aling-self 这个属性不是对弹性容器的，它要设置在弹性容器内部的弹性元素上。比如设置一个aling-self:flex-start; 就代表在弹性容器中给它开了个绿灯，它可以无视之前设置的主轴交叉轴的对齐方式，自己重新对齐。
flex-basis:auto; 弹性大小，默认自动，浏览器会参考宽度的值。如果设置了值，比如flex-basis:50px; 就会让弹性元素变成50px宽度，宽度还是高度取决于弹性盒子的方向，如果是行排列就是宽度，列排列就是高度。
flex-grow 决定了弹性元素的增加系数，如果是 1 的话，每个弹性元素都会变成1：1：1这样的，就是弹性元素会根据系数来自行分配空间，在每个弹性元素拿一份空间。如果是给某一个元素设置成 2 的增加系数的话，那么 x 个弹性元素会平均分成 x 份空间，然后这个元素它拿两份。
flex-shrink 是缩减系数，当浏览器进行一个缩写或者是容器的空间不够了，这个属性的值越大它缩减的程度越多。给所有弹性元素都设置成 1 ，那么每个元素的缩减程度相同；给某个弹性元素设置成 0 ，代表它不进行缩减。
flex 属性集合了 flex-basis 、flex-grow 、flex-shrink 三者，只给一个值的情况是等效于 grow 的情况，两个值的情况是 grow 和 basis ，三个值的情况是 grow、shrink 和 basis 。
\