本文主要是介绍flex-grow，flex-shrink 缩放比例详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、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;}}
}
这篇关于flex-grow，flex-shrink 缩放比例详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
