flex-shrink的作用是当子项总宽度超出容器时，按「flex-basis×flex-shrink」加权分配溢出空间，决定各子项让出多少；默认值为1，设0则完全不缩，负值无效。
flex-shrink 的作用是当子项总宽度超出容器时，决定每个子项“让出多少空间”。它不单独起作用，必须配合 flex-basis（或 width）和容器的 flex 布局才能生效。关键不是数值本身的比例，而是 flex-shrink × flex-basis 这个加权值决定了谁缩得多、谁缩得少。
flex-shrink 的基本行为
默认值是 1，所有子项按相同“收缩意愿”参与压缩；设为 0 就完全不缩，哪怕内容溢出也保持原尺寸。负值无效，会被忽略并按 1 处理。
- flex-shrink: 0 → 元素固定宽度，不参与压缩（常用于图标、头像等不能变形的内容）
- flex-shrink: 1 → 默认行为，与其他 flex-shrink:1 的兄弟元素等比例分摊压缩量
- flex-shrink: 2 → 同样 flex-basis 下，比 flex-shrink:1 的元素多缩一倍（注意：不是“缩两倍”，而是加权后占比更高）
收缩不是简单按数值比例，而是加权计算
浏览器真正参考的是 flex-shrink × flex-basis（即“收缩权重”）。flex-basis 越大、flex-shrink 越大，这个元素承担的压缩量就越多——这样能避免小元素被缩到看不见，而大元素还剩一大截。
- 例如：容器宽 400px，子项 A（flex-basis: 300px, flex-shrink: 1）、B（flex-basis: 200px, flex-shrink: 2）→ 总基准 500px，溢出 100px
- A 权重 = 300 × 1 = 300；B 权重 = 200 × 2 = 400；总权重 = 700
- A 缩：100 × 300/700 ≈ 42.9px；B 缩：100 × 400/700 ≈ 57.1px
- 最终宽度：A ≈ 257.1px，B ≈ 142.9px
常见实用组合
实际开发中很少单独写 flex-shrink，更多用 flex 简写统一控制：
-
flex: 0 0 auto→ 不放大、不缩小、按内容宽（等价于 flex-shrink: 0） -
flex: 1 1 200px→ 可放大、可缩小、基准宽 200px（flex-shrink: 1） -
flex: 0 1 120px→ 不放大、可缩小、基准宽 120px（适合固定最小宽度但允许压缩的文本块）
注意：如果只写 flex: 1，等价于 flex: 1 1 0，此时 flex-basis 是 0，所有空间都由 flex-grow 分配，flex-shrink 在这种情况下仍有效，但压缩起点是 0，表现会和预期不同。
调试时容易忽略的点
flex-shrink 是否生效，取决于三个前提是否满足：
- 父容器必须是
display: flex或inline-flex - 子项的总 flex-basis（或 width）之和 > 容器主轴尺寸
- 子项没有设置
min-width阻止进一步压缩（比如 min-width: 100px 会让它缩不到 100px 以下）
如果发现元素没缩，先检查这三点；再看 computed 样式里 flex-basis 实际取值（auto 会回退到 width，若都没设就由内容撑开），这才是参与计算的真实基准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
