flex子项不按预期比例收缩，主因是flex-shrink计算依赖flex-basis与内容尺寸；应显式设flex-basis（如0）、统一flex-shrink值，并用flex简写协同控制三属性，辅以min-width:0等破除内容撑开限制。
Flex子项不按预期比例收缩，通常是因为 flex-shrink 默认值为 1，但实际收缩行为还受 flex-basis、内容尺寸和父容器剩余空间共同影响。单纯设 flex-grow 无法控制收缩，必须配合 flex-shrink 和合理的 flex-basis 才能实现“等比伸缩”或“指定比例伸缩”。
理解 flex-shrink 的真实作用机制
flex-shrink 不是“按比例缩小自身”，而是决定“当空间不足时，各子项按权重‘退还’多少溢出空间”。它的计算基于：
（子项原始尺寸 − flex-basis）× flex-shrink。
若未设 flex-basis（默认为 auto），则以内容宽度为基准，此时文字多的项可能 shrink 更多，造成比例失真。
- 避免依赖默认 auto：显式设置 flex-basis（如
flex-basis: 0或具体值），让 shrink 计算有统一基准 - 设 flex-shrink: 0 可禁止收缩（适合固定宽子项）
- 多个子项想等比收缩？确保它们 flex-shrink 值相同，且 flex-basis 一致（推荐
flex-basis: 0）
用 flex: grow shrink basis 实现精准比例伸缩
推荐用简写 flex 统一控制三项，避免单独设导致冲突。例如：
-
flex: 2 2 0;→ grow=2, shrink=2, basis=0 → 相对其他flex: 1 1 0项，伸长/压缩都占双倍份额 -
flex: 1 0 200px;→ 允许放大、禁止缩小、基准宽 200px（适合最小宽度保障场景） - 要“等比伸缩+内容自适应”？用
flex: 1 1 max-content;（需注意兼容性）
常见陷阱与绕过方案
即使 flex-shrink 设对，仍可能“不收缩”：
立即学习“前端免费学习笔记（深入）”；
- 内容撑开容器：子项内联元素（如图片、文字）默认不换行/不压缩。加
min-width: 0;或overflow: hidden;强制允许收缩 - 父容器未设 width/max-width：flex 容器本身宽度无限，无“空间不足”触发 shrink。检查外层约束
- 使用了 min-width/max-width：这些会覆盖 flex-shrink 效果，优先级更高
基本上就这些。关键不是只调 flex-grow，而是把 flex-basis 当起点、flex-shrink 当分配权、内容约束当边界，三者协同才能稳住比例。