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 时，表示不参与压缩。
怎么用？看个例子
假设你有三个子元素，每个原本宽 200px，父容器宽 500px：- 总内容宽 600px，超出了 100px
- 这时就要靠 flex-shrink 来决定谁“让出空间”
<div class="container"> <div class="item item1">A</div> <div class="item item2">B</div> <div class="item item3">C</div> </div>CSS 示例：
.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 虽然不常手动设，但理解它能帮你搞明白为什么某些元素“莫名其妙变窄了”。
立即学习“前端免费学习笔记（深入）”；
