flex-shrink仅在容器内容总宽超过可用宽度时触发，设为2不代表缩至一半而是按权重参与分配；常见失效原因是未达收缩条件、min-width:auto限制或flex-basis设置不当。
flex-shrink 不是“设了就缩”，它只在容器主轴方向内容总宽 > 容器可用宽度时才触发；设成 2 也不代表缩成一半，而是按权重参与压缩分配。
flex-shrink 为什么设了没反应
最常见的情况：元素根本没到“需要收缩”的状态。比如父容器很宽、子元素内容很短，或者子元素被 min-width 卡住但没溢出——flex-shrink 压根不启动。
- 用浏览器 DevTools 检查容器是否真溢出（看 layout 边框或 computed width/height）
- 子元素若含长文本、
<img alt="如何在HTML中通过CSS Flexbox的flex-shrink控制子元素的收缩比例" >或内联内容，min-width: auto（Flex 默认）会阻止收缩，必须显式写min-width: 0 -
flex-basis是收缩计算的基准：设为auto时取内容宽，设为0时收缩完全从零开始；混用width和flex-basis会导致后者优先，width被忽略
怎么让两个子元素按 2:1 比例收缩
不能只调 flex-shrink: 2 和 flex-shrink: 1 —— 最终比例取决于 flex-shrink × flex-basis 的乘积是否平衡。
- 推荐做法：统一设
flex-basis: 0，再用flex: 2 2 0和flex: 1 1 0，这样初始“占位”就是 2:1，收缩也严格按此比例 - 若子元素有固有尺寸（如图片宽 400px / 200px），要维持视觉 2:1，则需设
flex-shrink: 1和flex-shrink: 2，因为400 × 1 = 200 × 2，力矩才相等 - Safari 对
min-width: 0更敏感，漏掉这行，收缩常失效
flex-shrink: 0 什么时候必须用
当你要保某个元素“死守最小尺寸”，比如含 clamp()、min-width 或内嵌 <iframe></iframe>/<video></video> 的卡片，flex-shrink: 0 是最直接的断点开关。
立即学习“前端免费学习笔记（深入）”；
- 它比单纯加
min-width更可靠：因为 Flex 默认行为会绕过min-width强制压缩 - 注意副作用：设了
flex-shrink: 0后，该元素不再参与空间争抢，可能把压力全甩给其他兄弟元素，导致它们过度压缩甚至换行 - 别全局重置：只对关键不可缩元素加，避免破坏整体弹性
真正难的不是算 flex-shrink 数值，而是判断「此刻到底需不需要缩」以及「谁该缩、谁该硬扛」——这得靠 DevTools 实时看溢出和 computed 值，而不是靠背公式。
