17370845950

flex-shrink用于控制弹性子元素在空间不足时的收缩比例，默认值为1，值越大收缩越多，0则不收缩；当容器宽度小于子元素总宽度时，浏览器按flex-shrink系数分配压缩量，如示例中item1（flex-shrink:1）和item2（2）共压缩100px，按1:2比例分别约缩33px和67px，而item3设为0保持不变，该属性常与flex-grow、flex-basis通过flex简写使用，理解它有助于排查元素意外变窄问题。

flex-shrink 是 CSS Flexbox 布局中的一个属性，用来控制弹性盒子（flex item）在空间不足时的收缩能力。

flex-shrink 是做什么的？

当所有弹性子元素的总宽度超过容器宽度时，浏览器需要决定如何缩小这些子元素以适应容器。flex-shrink 就是决定某个子元素“应该被压缩多少”的系数。

它的值是一个数字，默认是 1。值越大，元素在空间不足时被压缩的程度就越大；值为 0 时，表示不参与压缩。

怎么用？看个例子

• 总内容宽 600px，超出了 100px
• 这时就要靠 flex-shrink 来决定谁“让出空间”

  A
  B
  C

.container {
  display: flex;
  width: 500px;
}
.item {
  width: 200px;
  height: 100px;
}
.item1 { flex-shrink: 1; }
.item2 { flex-shrink: 2; }
.item3 { flex-shrink: 0; }

• item3 的 flex-shrink 为 0，不会被压缩，保持 200px
• item1 和 item2 需要一起“承担”100px 的压缩
• 按比例：1 + 2 = 3 份，item1 缩 1/3，item2 缩 2/3
• 最终 item1 变短约 33px，item2 变短约 67px

关键点总结

• 只在容器空间不够、内容溢出时起作用
• 不是设置“缩到多小”，而是“按比例缩多少”
• 和 flex-grow 不同，flex-grow 是空间多余时扩展
• 通常和 flex-basis、flex-grow 一起通过 flex 简写使用

基本上就这么回事。flex-shrink 虽然不常手动设，但理解它能帮你搞明白为什么某些元素“莫名其妙变窄了”。