简介
布局（Layout）的传统解决方案，是基于盒模型。
依赖 display 属性、 position 属性、 float 属性。
对于特殊布局有时非常不方便。例如垂直居中，三等分….
Flex 很好的解决了这些不方便。
以下是设置 Flex 布局的方式。
.box{
display:flex;
display:-webkit-flex;/*safari*/
}
.box{
display:inline-flex;
display:-webkit-inline-flex;/*safari*/
}
/*webkit内核的浏览器，必须加上-webkit前缀*/
注意：设置了 Flex 布局以后，子元素的 float、clear，vertical-align 属性失效
基本概念
-
采用 Flex 布局，称为Flex容器（flex container），
-
它的所有子元素自动成为容器成员（flex item）。
-
容器默认存在两根轴：水平主轴（main axis）和垂直的交叉轴（cross axis）。
-
主轴开始的位置（与边框的交叉点）叫做 main start，结束位置叫做 main end。
-
交叉轴开始的位置叫做 cross start，结束的位置叫做 cross end。
-
项目默认沿主轴排列，单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。
容器的属性（下列第 1 个属性为默认属性）
-
flex-direction : row row-reverse column column-reverse 定义主轴的方向 （横 倒横 竖 倒竖） -
flex-wrap : nowrap wrap wrap-reverse; 定义如果一条轴线排不下，如何换行（不换行 换行 换行且第一行在下方） -
flex-flow : [flex-direction] [flex-wrap] flex-flow 属性是 flex-direction 与 flex-wrap 属性的简写形式
-
justify-content : flex-start flex-end center space-between space-around 定义项目在主轴上的对齐方式（开头 结尾 中间 空白间隔等分 空白间隔等分+两端空白[1/2]） -
align-items : flex-start flex-end center baseline stretch; 定义项目在交叉轴上如何对齐。（开头 结尾 中间 项目的第一行文字的基线对齐 如果项目未设置高度或设置了 auto，将占满整个容器） -
align-content : flex-start flex-end center space-between space-around stretch; 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。（即行与行之间）
与交叉轴的（起点 终点 中点 两端对齐，间隔分布 间隔分布+ 两端空白[1/2] 轴线占满交叉轴）
项目的属性
-
order:
定义项目的排列顺序，数值越小，排列越靠前。默认值为 0。可以为负数。
-
flex-grow:
定义项目的放大比例，默认为 0，即有剩余空间时，此项目也不放大。
-
flex-shrink:
定义项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
-
flex-basis:
定义分配多余空间前，项目占据的主轴空间。浏览器根据此属性计算主轴是否有多余空间。默认值为 auto。
flex-basis:100%; 用来占据主元素的主轴宽度
-
flex:
flex属性是flex-grow, flex-shrink, flex-basis的简写，默认值为0 1 auto。后两个属性可选
该属性有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)
建议优先使用这个属性，而不是写三个分离的属性
-
align-self: auto flex-start flex-end center baseline stretch 该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性。如果没有父元素，则等同于 stretch。
总结
Flex布局简单来说，就是容器与项目的关系的布局的方式。
容器中有两条轴，一条主轴，一条垂直轴，主轴不规定是横的，这意味着同样的效果通常有两种实现方式。
容器中设置项目相对容器的对齐方式：横/竖排、是否断行、主轴方向对齐方式、垂直轴方向对齐方式（单/多行）
项目中设置项目占据父容量的比例及单独的对齐方式：相对容器的排序、是否伸/缩、在主轴占据的原始比例、单独对齐方式