flex-shrink是CSS flex布局中控制弹性项目收缩行为的核心属性，当所有flex项目的总宽度超过flex容器的可用宽度时，flex-shrink会决定每个项目需要收缩多少空间来适配容器。它的默认值为1，取值为非负数字，数值越大表示收缩优先级越高。
flex-shrink的基础规则
flex-shrink仅在容器空间不足时生效，当容器有足够空间容纳所有项目时，该属性不会产生任何效果。它的取值决定了项目的收缩权重，但是最终的收缩值并不是直接按照flex-shrink的数值比例分配，而是需要结合项目的原始宽度进行计算。
flex-shrink的完整计算步骤
flex-shrink的计算可以分为三个核心步骤，我们通过一个具体场景来演示：假设flex容器宽度为600px，内部有三个flex项目，原始宽度分别是200px、300px、400px，三个项目的flex-shrink分别设置为1、2、3。
第一步：计算总溢出空间
先计算所有项目的原始总宽度，再减去容器的可用宽度，得到需要收缩的总空间。
/* 容器样式 */
.container {
display: flex;
width: 600px;
}
/* 三个项目样式 */
.item1 {
width: 200px;
flex-shrink: 1;
}
.item2 {
width: 300px;
flex-shrink: 2;
}
.item3 {
width: 400px;
flex-shrink: 3;
}
总原始宽度：200 + 300 + 400 = 900px，容器宽度600px，溢出空间为900 - 600 = 300px，也就是总共需要收缩300px。
第二步：计算加权总宽度
加权总宽度是每个项目的原始宽度乘以对应的flex-shrink值的总和，这个数值决定了每个项目的收缩占比。
计算方式：
- 项目1加权宽度：200 * 1 = 200
- 项目2加权宽度：300 * 2 = 600
- 项目3加权宽度：400 * 3 = 1200
- 加权总宽度：200 + 600 + 1200 = 2000
第三步：计算每个项目的实际收缩值
每个项目的收缩值 = 溢出总空间 * (该项目的加权宽度 / 加权总宽度)，再用原始宽度减去收缩值得到最终宽度。
具体计算：
- 项目1收缩值：300 * (200 / 2000) = 30px，最终宽度：200 - 30 = 170px
- 项目2收缩值：300 * (600 / 2000) = 90px，最终宽度：300 - 90 = 210px
- 项目3收缩值：300 * (1200 / 2000) = 180px，最终宽度：400 - 180 = 220px
可以验证三个项目最终总宽度：170 + 210 + 220 = 600px，刚好等于容器宽度，符合预期。
特殊场景说明
flex-shrink为0的情况
如果某个项目的flex-shrink设置为0，说明该项目不会收缩，所有溢出空间都由其他flex-shrink大于0的项目承担。比如上面的例子中把项目1的flex-shrink改为0，那么加权总宽度就变成0 + 600 + 1200 = 1800，项目2收缩值为300 * (600/1800) ≈ 100px，最终宽度200px，项目3收缩值为300 * (1200/1800) ≈ 200px，最终宽度200px，项目1保持200px不变，总宽度200+200+200=600px。
项目原始宽度的影响
即使两个项目的flex-shrink数值相同，如果原始宽度不同，收缩值也会不同。比如两个项目原始宽度分别是100px和200px，flex-shrink都是1，溢出空间30px，那么加权总宽度为100*1 + 200*1 = 300，第一个项目收缩30*(100/300)=10px，第二个收缩20px，并不是各收缩15px。
代码验证示例
我们可以通过以下完整代码在浏览器中验证计算结果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
display: flex;
width: 600px;
border: 1px solid #ccc;
margin: 20px 0;
}
.item1 {
width: 200px;
flex-shrink: 1;
background: #f00;
height: 50px;
}
.item2 {
width: 300px;
flex-shrink: 2;
background: #0f0;
height: 50px;
}
.item3 {
width: 400px;
flex-shrink: 3;
background: #00f;
height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
打开浏览器后查看三个项目的实际宽度，会和我们之前计算的结果一致，也可以自行修改flex-shrink和原始宽度的值来验证不同场景的计算结果。
注意事项
如果项目设置了min-width属性，那么项目的最终宽度不会小于min-width的值，即使按照flex-shrink计算出来的宽度更小，也会按照min-width的值显示，此时可能会出现容器溢出的情况。另外flex-shrink仅对明确设置了宽度的flex项目生效，如果项目宽度是由内容撑开没有固定值，计算时会以内容实际占用的宽度作为原始宽度参与计算。
flex-shrinkflex布局CSS_flex收缩计算修改时间：2026-06-28 16:24:33