flex-shrink: 0对图标无效的根本原因是它未作用于直接flex子项，且被flex简写覆盖或受min-width:auto限制；必须配合flex: 0 0 auto、min-width: 0、width: auto和height: auto才真正生效。
为什么图标加了 flex-shrink: 0 还是被压成小点
不是属性失效，而是它根本没生效：浏览器只在元素是真正 display: flex 容器的**直接子项**时才解析 flex-shrink。常见失效链是：<button><svg></svg></button> → 把 flex-shrink: 0 加在 <button> 上，但 SVG 是内联元素，不参与 Flex 计算；或者按钮本身被包在 <div class="item"> 里，而样式写在了 wrapper 上。
更隐蔽的是简写覆盖：flex: 1、flex: auto 或甚至 flex: 0 1 auto 都会重置 flex-shrink 为 1，把后面单独写的 flex-shrink: 0 直接覆盖掉。
flex-shrink: 0 必须配合哪些声明才对图标真正起效
单写这一行风险极高，尤其对 <svg>、<img> 或带图标的 <button>。必须协同控制三层：
-
flex: 0 0 auto—— 显式锁死增长、收缩、基准尺寸，比单独写flex-shrink: 0优先级更高、更不易被覆盖 -
min-width: 0—— 图标类替换元素默认有min-width: auto，不加这句，flex-shrink: 0形同虚设 -
width: auto; height: auto—— 防止某些 CSS 重置或框架样式把flex-basis: auto覆盖成100%，导致图标按父宽拉伸
对纯 SVG，还可加 vertical-align: middle 避免基线对齐导致的额外高度塌陷。
立即学习“前端免费学习笔记（深入）”；
哪些图标场景必须用 flex-shrink: 0，哪些反而不该用
必须加的场景（失宽即失效）：
- 导航栏中的 Logo SVG 或 PNG 图标
- 搜索框右侧的提交按钮（
<button><svg></svg></button>） - 表单中带图标的开关控件（如“已读”旁的勾选图标）
- 卡片右上角的关闭按钮（× 图标，固定 24px）
不该加的场景：
- 整行图标列表（如社交图标组），应改用
flex-wrap: wrap+min-width: 0允许换行 - 响应式侧边栏里的图标菜单项，若容器宽度可能窄于图标总宽，全设
flex-shrink: 0会导致横向滚动 - 文字+图标混合的标签（如“下载
<svg>”），应只给 SVG 加，文字部分保留弹性
移动端调试时最常漏掉的三个检查点
真机上图标突然变细、闪动或消失，大概率卡在这三处：
-
<meta name="viewport" content="width=device-width, initial-scale=1">缺失 → 所有 Flex 计算基于桌面视口，尺寸全错 - 父容器用了
position: fixed或max-width: 100%但没设min-width→ 自身先塌缩，子图标再怎么锁也无框可守 - DevTools 里看的是 “Computed” 标签页的
flex-shrink值，但真正关键的是 “Layout” 标签页里的flex-basis解析结果（常显示为auto或具体像素）和 “Layout Width” 实际值
真正容易被忽略的，是图标是否作为**直接 flex item**——如果中间隔了一层 <span> 或 <div>，flex-shrink: 0 必须落在那个包裹元素上，而不是它的父级或子级。
