flex-shrink 基于「flex-basis × flex-shrink」加权分配溢出空间，仅在子项初始总宽超容器时生效；压缩量=溢出量×(单项权重/总权重)，最终宽=flex-basis−压缩量。
flex-shrink 的压缩不是简单按数值比例切分，而是基于「flex-basis × flex-shrink」加权分配溢出空间。它只在所有子项的初始总宽度（含 padding、border）超过容器主轴尺寸时才生效。
触发条件：必须有“溢出”
只有当所有子项的 flex-basis 总和（或内容宽度 + padding + border）大于容器宽度 时，flex-shrink 才会起作用。没有溢出，就完全不压缩。
- flex-basis 是计算起点：优先级高于 width；设为 auto 时回退到 width 或内容宽度
- padding 和 border 默认计入初始宽度（即使 box-sizing: border-box 也不改变它们的占用）
- 若 flex-basis 总和 = 500px，容器宽 = 400px → 溢出量 = 100px，开始压缩
压缩量怎么算：看加权值，不是看 shrink 数字本身
浏览器真正比较的是每个子项的 flex-shrink × flex-basis，这个乘积叫“收缩权重”。权重越大，承担的压缩量越多。
- 总权重 = Σ(flex-shrinki × flex-basisi)
- 第 i 项压缩量 = 溢出量 × (flex-shrinki × flex-basisi) ÷ 总权重
- 最终宽度 = flex-basisi − 压缩量
例如：容器宽 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 → 最终宽 ≈ 257.1px
B 缩：100 × 400/700 ≈ 57.1px → 最终宽 ≈ 142.9px
常见取值的实际效果
- flex-shrink: 0：完全不参与压缩，哪怕内容溢出也保持原尺寸（适合图标、按钮、头像等固定尺寸元素）
- flex-shrink: 1（默认）：和其他 flex-shrink: 1 的兄弟项按各自 flex-basis 加权分摊压缩
- flex-shrink: 2：在相同 flex-basis 下，压缩量接近 flex-shrink: 1 的两倍（因权重翻倍）
- 负值无效：如 flex-shrink: -1 会被忽略，按 1 处理
配合使用的关键提醒
- 想“固定宽度”，不能只靠 flex-basis，必须加 flex-shrink: 0
- 要让多个子项等宽填满容器，推荐用 flex: 1 1 0（即 flex-grow: 1; flex-shrink: 1; flex-basis: 0），避免内容宽度干扰
- 移动端易错位？检查是否误让文字多的项（flex-basis 大）和图标项（flex-basis 小）共用默认 flex-shrink: 1 —— 应给图标设 flex-shrink: 0，文字项保留或调高 shrink 值
