flex-shrink: 0 是阻止压缩的最直接开关，它使元素完全跳过收缩流程；但需配合 min-width: 0（尤其对 img/button）、确保为直接子项、避免被 flex 简写覆盖，并按需使用而非全局设置。
flex-shrink: 0 是阻止压缩的最直接开关
它不是“建议”，而是浏览器计算收缩分配时的硬性过滤器：设为 flex-shrink: 0 的项会被完全跳过收缩流程，不参与任何比例缩放。这比调 width 或 min-width 更早介入、更确定——因为 width 在 Flex 里只是“建议值”，而 flex-shrink: 0 直接关掉了压缩逻辑本身。
但注意：flex-shrink: 0 不等于“绝对不缩”。如果父容器没设 width 或 min-width，自身先塌缩，子项再怎么锁也没用；如果用了 flex: 1 这类简写，会覆盖你单独写的 flex-shrink: 0；如果目标元素不是 flex 容器的直接子项（比如 <img> 包在 <div> 里），那 flex-shrink: 0 加在 <div> 上就无效。
图片和图标按钮必须加 flex-shrink: 0 + min-width: 0
<img>、<button> 带 SVG 图标这类替换元素，默认有 min-width: auto，会锁死最小宽度，导致 flex-shrink: 0 形同虚设。只加 flex-shrink: 0 往往不够。
- 对
<img>本身写：flex-shrink: 0; min-width: 0; max-width: 100%; height: auto; - 避免写
width: 100%——它会覆盖 intrinsic 尺寸，干扰flex-basis计算 - 确保
<img>是 flex 容器的**直接子项**；若中间隔了 wrapper，flex-shrink: 0必须加在<img>上，而非 wrapper - 父容器若也是 flex 且含文本，需额外给它设
min-width: 0，防止它先塌缩再传导挤压
文字类按钮或标签要用 flex: 0 0 auto 而非只写 flex-shrink: 0
单独写 flex-shrink: 0 对纯文字内容风险高：它禁了收缩，但没锚定基准尺寸。如果文字很长（比如一长串无空格邮箱），又没控制换行，容器照样被撑破。
立即学习“前端免费学习笔记（深入）”；
更稳妥的是用简写：flex: 0 0 auto，它明确表示“不增长、不收缩、基准尺寸按内容来”，优先级高于单独的 width，也比 flex-shrink: 0 更不容易被覆盖。
再配合：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，才能真正防文字挤变形或换行错乱。
别全局设 * { flex-shrink: 0 }，按需锁定关键元素
Flex 布局的弹性本意是让部分内容收缩腾空间，全关掉反而会让布局僵硬甚至横向溢出。只对那些“失宽即失效”的元素加 flex-shrink: 0：
-
<img>（头像、Logo、商品图） - 带图标的
<button>或开关控件 - 短文本标签（如“VIP”“已读”）
- 固定宽侧边栏、表单中带单位的输入框（如 “px” 文本）
其余内容区（如主卡片流、文本段落容器）应保留 flex-shrink: 1，让它承担收缩责任。否则小屏下多个 flex-shrink: 0 元素并排，极易超宽，只能靠 flex-wrap: wrap 或媒体查询降级补救——那已是兜底，不是设计初衷。
