一、flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果设定了flex-grow，当容器有剩余空间时，凡是flex-grow大于0的项目将一起瓜分剩余空间，每个项目所分到的剩余空间，跟项目自身的大小无关，只跟各项目设定的flex-grow和剩余空间有关。
如下例子，parent宽度 大于 son1+son2设定的宽度，计算son1放大后的宽度：
son1最终渲染宽度 = son1设定宽度 + 应放大宽度
（1）先获取剩余空间： parent宽度 - （son1设定宽度 + son2设定宽度）
300 - (120 + 140) = 40px
（2）应放大宽度 = 剩余空间 * 占比
占比 = son1的flex-grow / （son1的flex-grow + son2的 flex-grow）
son1应放大宽度 = 40*1.5/(1+1.5) = 24
son1最终渲染宽度 = 120px + 40*1.5/(1+1.5) = 144px
<div class="parent">
<div class="son son1">1</div>
<div class="son son2">2</div>
</div>
.parent {
display: flex;
width: 300px;
height: 300px;
background: #fff;
border: 1px solid #999;
.son {
&.son1 {
background: blue;
flex-basis: 120px;
flex-grow: 1.5;
}
&.son2 {
background: #f9ff33;
flex-basis: 140px;
flex-grow: 1;
}
}
}二、flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。不同于flex-grow，如果设定了flex-shrink，当容器空间不足时， 每个项目收缩的空间，不仅跟项目设定的flex-shrink和总的收缩空间有关，还跟项目自身的大小有关。
- 容器剩余宽度：200 - (100+120+130) = -150
- 缩小因子的分母：
1*100 + 2*120 + 3*130 = 730(*前面的数字为各项目的flex-shrink值) - son1的缩小因子：
1*100/730 - son1的缩小宽度为缩小因子乘于容器剩余宽度：
1*100/730 * (-150) - son1最后则缩小为：
100px + (1*100/730 * (-150)) = 79.45px
加入弹性元素本身大小作为计算方法的考虑因素，主要是为了避免将一些本身宽度较小的元素在收缩之后宽度变为0的情况出现。
<div class="parent">
<div class="son son1">1</div>
<div class="son son2">2</div>
<div class="son son3">3</div>
</div>
.parent {
display: flex;
width: 200px;
height: 300px;
background: #fff;
.son {
&.son1 {
background: blue;
flex-basis: 100px;
flex-shrink: 1;
}
&.son2 {
background: yellow;
flex-basis: 120px;
flex-shrink: 2;
}
&.son3 {
background: red;
flex-basis: 130px;
flex-shrink: 3;
}
}
}
