介绍
本文中的属性，都是定义在 Flex弹性布局的 子元素 中
flex-grow属性
flex-grow属性定义 子元素 的 放大比例，默认为 0，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有 子元素 的
flex-grow属性都为1，则它们将 等分剩余空间（如果有的话）。如果一个项目的
flex-grow属性为2，其他项目都为1， 则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性
flex-shrink属性定义了 子元素 的 缩小比例，默认为 1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的
flex-shrink属性都为1，当空间不足时，都将 等比例缩小。如果一个项目的
flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
flex-basis属性
默认值为 auto，即：flex-basis:auto，元素会先被内容撑开，再分剩余空间。
如果是 0%，表示元素 初始尺寸为 0，宽度完全由 flex-grow 分配剩余空间决定，不受内容文字 / 图片撑开影响。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex属性（推荐）
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性快捷值：
flex: 1= 基准 0，纯均分剩余空间flex: auto=grow:1 shrink:1 basis:auto，先被内容撑开再分空间flex: none=grow:0 shrink:0 basis:auto，固定尺寸，不放大不缩小
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}
案例
div实现左侧自适应宽度，右侧固定宽度-flex弹性布局实现
参考：
https://www.runoob.com/w3cnote/flex-grammar.html