之前块级元素布局在同一行，可以通过display或position或float来实现，而本篇介绍一个新的方法——flex（弹性布局）。
flex 为和模型布局提供了极大地灵活性，所谓弹性布局即可根据大小判定自动伸缩。
flex相关的各个属性如下：
1、display：flex；在父盒子定义flex，子盒子才能使用flex属性
2、flex：none |flex-grow flex-shrink flex-basis 设置子盒子的缩放比例，可以一起指定也可以单独指定。（均不可为负数）
（1）none 相当于 flex： 0 0 auto；
（2）flex-grow 用来规定盒子的扩展比率，即盒子相对于其他盒子能够分配到的空间的比值，没有指定flex的不参与分配。
View Code
上面图中子盒子所占大小的计算方法为：
a、.son1 没有指定flex 因此不参与分配大小为固定的200px；
b、剩下的空间需要减去盒子固有的宽度来继续分配，即可分配空间为
600-50-30-80=440px
c、指定分配的比率为1:2:3 所以各自能分配到的大小为440*（1/6），440*（2/6），440*（3/6）
d、最后可得出各个盒子的大小
.son2: 440*（1/6）+50=123.3px
.son3: 440*（2/6）+30=176.7px
.son4: 440*（3/6）+80=300px
（3）、flex-shrink 规定盒子收缩率，一般是在子盒子总体大小超过父盒子情况下，确定各个盒子的缩小比例。
View Code
上面图中子盒子所占大小的计算方法为：
a、子盒子总体宽度大小为：100+200+300=600px
b、超过父盒子 600-400=200px
c、收缩比率为：1:2:3 ，则对收缩大小进行加权求值,求出收缩大小
.son1: 200*[100*1/（1*100+2*200+3*300）]=14px
.son2: 200*[200*2/（1*100+2*200+3*300）]=57px
.son1: 200*[300*3/（1*100+2*200+3*300）]=129px
d、最终各个盒子大小为
.son1: 100-14=86px；
.son2: 200-57=143px；
.son3: 300-129=171px；
（4）、flex-basis：长度 |百分比
View Code
一般设置不超过盒子大小或者不超过100%，超过100%则按比例分配空间。
如上图按7:6:10 来分配，设置为auto，则以自身大小来分配。
（5）、常用复合属性
flex：1相当于 flex：1 1 0%；
flex：auto 相当于 flex：1 1 auto；
flex：none 相当于 flex：0 0 auto；
flex：0 none 或flex：initial 相当于 flex：0 1 auto；
3、flex-direction：row | row-reverse | column | column-reverse 调整株洲方向，即合适是水平分布还是垂直分布的，默认是水平方向。
上面四个值分别是，水平| 水平反向| 垂直| 垂直反向
反向的意思是，盒子顺序是相反的。
View Code
4、justify-content: flex-start | flex-end | center | space-between | space-around 子盒子在父盒子中的水平对齐方式。
flex-start ：默认值，项目向容器起始位置对齐（靠左对齐）
View Code
接下来只将justify-content 值改变，就不重复写代码了，只给出结果图
flex-end：项目向容器结束位置对齐。（靠右对齐）
center：项目位于容器的中间。（水平居中）
space-between：各个项目中间有空隙，但是开头和结尾紧贴容器（父盒子）
space-around：各个项目中间有空隙，且空隙距离相同（相当于每个盒子左右给了一个相同的margin值）
5、align-items：flex-start | flex-end | center | baseline | stretch 子盒子在父盒子中的垂直对齐方式
View Code
同样接下来几种只给出效果图
flex-start：上对齐
flex-end ：下对齐
center：垂直居中对齐
baseline：与项目的第一行文字的基线对齐，因此当基线在同一条线上时，与flex-start一致
6、flex-wrap：nowrap | wrap | wrap-reverse 当子盒子大小超过父盒子是是否换行
nowrap：默认值，不换行。强行在一行显示，因此每个盒子的大小都会减少。
View Code
wrap：换行显示。
wrap-reverse：换行且倒着显示
7、flex-flow: flex-direction flex-wrap; flex-flow 是flex-direction 和 flex-wrap 的简写，默认值是flex-flow： row wrap
8、align-content：flex-start | flex-end | center | space-between | space-around | stretch 容器中多行的对齐方式
View Code
flex-start：上对齐
flex-end：下对齐
center：居中对齐
space-between ：与justify-content中的 space-between类似 最上一行 顶对齐，最下一行 底对齐
space-around：与justify-content中的 space-around类似 各个行上下有空隙，且空隙距离相同（相当于每行上下给了一个相同的margin值）
9、order：设置子盒子显示顺序。值取整数，可以为负数，数值越小的排列方向越靠前。
View Code
注意事项：
上述的9个属性，其中1、3、4、5、6、7、8是放在容器（父盒子）的属性
而2、9是项目(子盒子)的属性https://www.cnblogs.com/Assist/p/9682076.html
