css中flex-shrink属性是什么？一文搞懂弹性收缩计算规则

在css的flex布局中，flex-shrink是用来控制子项在空间不足时如何收缩的属性。当所有flex子项的原始宽度加起来超过容器宽度，浏览器就会根据每个子项的flex-shrink值来分配需要减去的宽度。简单来说，它就是弹性盒模型里的收缩比例开关。

flex-shrink的基本定义

flex-shrink是flex子项的属性，接受非负数字，默认值是1。值为0时表示该子项不参与收缩，保持自身宽度；值大于0时，数值越大收缩得越多。它通常和flex-grow、flex-basis一起出现在flex简写里。

常见写法

• 单独设置：flex-shrink: 0;
• 简写形式：flex: 0 1 200px; 其中第二个值就是flex-shrink

收缩宽度怎么算

假设容器宽度固定，多个子项溢出，计算步骤如下：先算出总溢出宽度，再根据各子项的flex-shrink乘以自身flex-basis得到权重，最后按权重比例分摊溢出量。

示例计算

容器宽400px，三个子项basis都是200px，shrink分别为1、2、3：

<div class="box">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

.box { display: flex; width: 400px; }
.a { flex-basis: 200px; flex-shrink: 1; }
.b { flex-basis: 200px; flex-shrink: 2; }
.c { flex-basis: 200px; flex-shrink: 3; }

总溢出 = 600 - 400 = 200px。权重和 = 1*200 + 2*200 + 3*200 = 1200。A减 200*(200/1200)=33.3px，B减66.7px，C减100px。

实际使用建议

如果想让某个导航项不被压缩，可设flex-shrink:0。在响应式卡片列表中，让图片容器不收缩而文字区收缩，能提升可读性。理解flex-shrink后，就能预测并控制flex布局的压缩行为，不再被奇怪的排版困扰。

注意：flex-shrink只在子项总宽度大于容器时生效，空间有剩余时它不起作用。

cssflex-shrinkflex布局修改时间：2026-07-27 00:54:23