flex是弹性布局（Flexible Box）中常用到的属性，是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
先简单地介绍一下这三个组成属性。
需要提前说明的是，建议优先使用flex属性，因为浏览器会推算相关值。
flex-grow
flex-grow属性定义项目的放大比例，值越大占据剩余空间越多。默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都设置为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink
flex-shrink属性定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex 取值
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
（1）当 flex 取值为 none，则计算值为 0 0 auto，如下是等同的：
.item {flex: none;}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
如果一个盒子设置为flex: none;，它实际的宽高就由它自身决定
（2）当 flex 取值为 auto，则计算值为 1 1 auto，如下是等同的：
.item {flex: auto;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
（3）当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
（4）当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
（5）当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
（6）当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：
.item {flex: 2333 3222px;}
.item {
flex-grow: 2333;
flex-shrink: 1;
flex-basis: 3222px;
}
flex 属性使用常见场景
当我们遇到下面这张布局，用flex布局就再合适不过了。
父盒子中有多个子盒子，且其它盒子长或宽固定，由一个弹性盒子撑满父盒子剩余部分。
方案1：父盒子设置display: flex;，给固定长宽的盒子设置长宽，占据剩余部分的盒子设置flex: 1;
方案2：父盒子设置display: flex;，给固定长宽的盒子设置长宽及flex: none，占据剩余部分的盒子设置flex: auto;
方案1：
.parent {
width: 300px;
border: 5px solid #666666;
display: flex;
}
.parent > .box1 {
width: 200px;
height: 100px;
background-color: pink;
}
.parent > .box2 {
flex: 1;
background-color: gold;
}
方案2：
.parent {
width: 300px;
border: 5px solid #666666;
display: flex;
}
.parent > .box1 {
width: 200px;
height: 100px;
background-color: pink;
flex: none;
}
.parent > .box2 {
flex: auto;
background-color: gold;
}
如果除弹性盒子之外的其它盒子的尺寸超出父盒子，那么两者方案的效果就不同了，如设置box1宽度为400px：
方案1：
box1盒子宽度将被压缩为300px，而box2盒子宽度为0px。
方案2：
box1盒子宽度将被压缩为300px，而box2盒子宽度为0px。
原因分析：
方案1：
子盒子box2设置flex: 1;，等同于 flex-grow、flex-shrink 分别设置为1，当父盒子空间不足，box1宽度将会缩小到与父盒子一致，子盒子box2占据剩余宽度0px。
方案2：
子盒子box1设置flex: 0;，等同于 flex-grow、flex-shrink 分别设置为0，当父盒子空间不足，box1尺寸不变；子盒子box2设置flex: auto;，等同于 flex-grow、flex-shrink 分别设置为1，当父盒子空间不足，box2占据剩余宽度0px。
在实际开发中，可以根据实际需求来进行开发。但是元素设置 flex:1 在IOS会存在一些兼容性问题，如：子元素height: 100%失效。具体问题及解决办法请参照这篇文章：https://blog.csdn.net/qq_20567691/article/details/81201192
因此建议多使用方案2的方式进行弹性布局。
文中有不足或者读者有疑问或更好的见解，欢迎留言讨论。
如果觉得该篇文章对您有帮助，别忘了留下您的足迹，点个赞❤噢