Flex布局
flex布局是一个一维布局，存在一个主轴，一个垂直的交叉轴。
弹性容器有display-flex块级弹性容器display:inline-flex行内弹性容器两种方式，外层盒子称为容器，内层盒子称为项目。
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
弹性容器的属性有
flex-direction：（ row（水平） | row-reverse | column | column-reverse）用来设置弹性容器的主轴方向（排列方向）
flex-wrap：( nowrap ｜ wrap ｜wrap-reverse第一行在下面 )设置弹性元素在主轴上是否自动换行
justify-content：(flex-start｜flex-end｜center｜space-between/around空白空间分配在项目间/分配在项目左右)主轴上的对齐方式
align-items：(flex-start｜flex-end｜center｜baseline文字基线对齐 stretch拉伸撑满侧轴)侧轴上对齐方式
align-content：(flex-start｜flex-end｜center｜space-between/around空白空间分配在项目间/分配在项目左右｜stretch)多行时的对齐方式
弹性元素的属性有
order：项目的排列顺序，数值小，排列靠前。默认0
flex-grow：项目的放大比例；默认0。相当于百分比分配空间，每个人占总空间的几份
flex-shrink：项目的缩小比例；默认1。空间不足时，shrink越大越缩小。
flex-basis：设置弹性元素宽度；auto｜数字。设置宽度，根据这个属性计算是否存在多余空间。
align-self：单个项目设置侧轴上对其方式（覆盖align-items）。默认：auto（继承父元素的align-items），无父元素等同于stretch
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
简写属性：
容器简写属性：flex-flow：（ || ）默认值：row nowrap
项目简写属性：flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 默认：0 1 auto。
auto（ 1 1 auto ）、none（ 0 0 auto ）、1（ 1 1 0% ）
计算逻辑：
先计算basis，得到剩余的空间大小
剩余空间为正数：通过grow计算剩余空间给所有元素分配的大小（按比例分配）
剩余空间为负数：通过shrink计算剩余空间给所有元素需要缩小的大小（按比例分配）
flex布局实际布局：www.ruanyifeng.com/blog/2015/0…
Q&A：
flex：1的实现原理？
flex：1 => flex: 1 1 0%
先计算basis，得到剩余的空间大小
剩余空间为正数：通过grow计算剩余空间给所有元素分配的大小（按比例分配）
剩余空间为负数：通过shrink计算剩余空间给所有元素需要缩小的大小（按比例分配）
子元素的basis值：0
剩余空间 = 容器宽度
子元素都是flex：1
所有元素按比例分配，所以实现了平均分配。
