flex-shrink自动计算规则是什么？结合实际代码场景求解答
2026-10-1
flex-shrink 收缩宽度计算逻辑
首先明确核心前提：flex-shrink的收缩权重计算需要结合元素自身的flex-basis，不是单纯按flex-shrink的数值比例分配溢出空间，完整计算步骤如下：
步骤1：计算总溢出宽度
三个子元素的flex-basis总和：3 * 400px = 1200px
父容器可用宽度：900px
需要收缩的总溢出宽度 = 1200px - 900px = 300px
步骤2：计算所有子元素的收缩总权重
单个元素的收缩权重公式：flex-shrink值 * flex-basis值
你示例中三个元素的收缩权重分别为：
- 第一个子元素：
1 * 400px = 400 - 第二个子元素：
1 * 400px = 400 - 第三个子元素：
2 * 400px = 800
总收缩权重 =400 + 400 + 800 = 1600
步骤3：计算单个元素的收缩宽度
单个元素收缩宽度公式：(单个元素收缩权重 / 总收缩权重) * 总溢出宽度
代入数值计算：
- 前两个子元素各自收缩宽度：
(400 / 1600) * 300px = 75px，最终宽度 =400px - 75px = 325px - 第三个子元素收缩宽度：
(800 / 1600) * 300px = 150px，最终宽度 =400px - 150px = 250px
和flex-grow的差异
flex-grow分配剩余空间时，默认是直接按flex-grow的数值比例分配，不需要乘flex-basis；而flex-shrink分配溢出收缩量时，需要乘flex-basis计算权重，这是两者计算逻辑的核心区别。
内容的提问来源于stack exchange，提问作者peckoski
相关产品推荐
相关产品推荐
