flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设为 flex 布局以后，子元素的 float、 clear 和 vertical-align 属性将失效。
采用flex布局的元素，称为Flex容器(flex container)，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称"项目"。
Flex项目中使用 flex 属性可以根据Flex容器的可用空间对自身做伸缩计算，其包含三个子属性： flex-grow（扩展比率）、flex-shrink（收缩比率） 和 flex-basis（伸缩基准）。这三个属性可以控制Flex项目。
flex-grow
设置Flex项目的扩展比率，让Flex项目得到（扩展）多少Flex容器剩余空间（Positive Free Space），即Flex项目可能会变大。
flex-grow省略时默认值为 1，初始值为 0。
flex-grow: <number>;
设置Flex项目的扩展比率要根据所有Flex项目的 flex-grow 总和来定。
总和小于1时，Flex项目同样会根据 flex-grow 增长因子来瓜分Flex容器的剩余空间，Flex自身宽度也会变大，但Flex容器的剩余空间不会被全部瓜分完，因为所有 flex-grow 和小于 1 。
总和大于1时，但也不可以绝对地说，Flex项目可以根据自身的 flex-grow 所占比率来瓜分Flex容器的剩余空间。因为元素的尺寸会受 max-width 的影响。当Flex项目显式设置了 max-width的值时，当Flex项目根据flex-grow计算出来的宽度大于 max-width时，Flex项目会按 max-width 的值为准。
flex-shrink
设置Flex项目收缩比率，让Flex项目减去Flex容器不足的空间（Negative Free Space），即Flex项目可能会变小。
flex-shrink省略时默认值为 1，初始值为 1。
flex-shrink: <number>;
flex-basis
Flex项目未扩展或收缩之前，它的大小，即指定了Flex项目在主轴方向的初始大小。
flex-basis省略时默认值为 0，初始值为 auto。若值为0，则必须加上单位，以免被视作伸缩性。
flex-basis: <number>;
flex
flex 属性可以指定 1个值（单值语法）、2个值（双值语法） 或 3个值（三值语法）。
单值语法
flex-grow: 一个 无单位的数<number>，比如flex: 1flex-basis: 一个有效的宽度width值，比如flex: 30vw- 关键字值:
none、auto或initial（即初始值）
双值语法
第一个值: flex-grow无单位数值
第二个值:
flex-shrink: 一个无单位的数<number>flex-basis: 一个有效的宽度width值
三值语法
第一个值: flex-grow 无单位数<number>
第二个值: flex-shrink 无单位数<number>
第三个值: flex-basis 有效的宽度width值
flex 属性的取值
auto：Flex项目会根据自身的 width 和 height 来确定尺寸，但Flex项目根据Flex容器剩余空间进行伸缩。其相当于 flex: 1 1 autoinitial：Flex项目会根据自身的 width 和 height 来设置尺寸。它会缩短自身以适应Flex容器，但不会伸长并吸收Flex容器中的额外剩余空间来适应Flex容器。其相当于 flex: 0 1 autonone：Flex项目会根据自身的 width 和 height 来设置尺寸。它是完全非弹性的（既不会缩短，也不会伸长来适应Flex容器）。其相当于 flex: 0 0 auto
默认情况下，元素不会缩短至小于内容框尺寸，若想改变这一状况，请设置元素的min-width 与 min-height属性。
常用示例
- css 实现左侧固定 300px，右侧自适应的布局
.container {
display: flex;
}
.left {
flex-basis: 300px;
flex-shrink: 0;
}
.right {
flex-grow: 1;
}
或者
.container {
display: flex;
}
.left {
width: 300px;
}
.right {
flex: 1 1 auto;
}
参考资料： MDN Flexbox布局中不为人知的细节
