综述：flex布局是一种十分常见的布局方式，需要积累一下，十分重要
核心：flex布局主要是通过给父元素和子元素设定相应的值，实现自适应，容器和子元素分别有6大属性
1.父亲元素，也就是容器的六大属性介绍
- 在使用弹性布局之前首先要构建一个容器，给容器设定display：flex值，Webkit 内核的浏览器，必须加上
-webkit前缀；所以必须要这样写才能兼容所有浏览器
.box{
display: -webkit-flex; /* Safari */
display: flex;
}-
flex-direction:属性决定主轴的方向（即项目的排列方向） -
flex-wrap :默认情况下，项目都排在一条线（又称"轴线"）上。
flex-wrap属性定义，如果一条轴线排不下，如何换行。 -
flex-flow:
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 -
justify-content:
justify-content属性定义了子元素在主轴上的对齐方式。 -
align-items：属性定义项目在交叉轴上如何对齐。
-
align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
2.子元素六大属性介绍
-
order:属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
-
flex-grow:属性定义项目的放大比例，默认为
0，即如果存在剩余空间，也不放大。 -
flex-shrink:属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
-
flex-basis:属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为
auto，即项目的本来大小。 -
flex:
flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。 -
align-self:
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
3.弹性布局的利弊
好处是，布局更加精简，直接用css的方式，你不用再引入bootstraop，使用栅格系统。
瑕疵就是，IE10及IE10以上才支持，所以目前主要应用在移动端上。
如果你们公司的需求是兼容IE10以上，那么我推荐你使用flex布局。
4.使用flex布局的demo
点击查看：http://developer.51cto.com/art/201712/560355.htm
参考文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html