flex-shrink: 0 单独无效，因图标作为替换元素默认 min-width: auto 会锁死计算，必须配合 min-width: 0（row）或 min-height: 0（column），并确保其为直接 flex item，否则仍被压细或撑破。
只写 flex-shrink: 0 无法防止图标变形，它只是跳过收缩计算，不定义尺寸起点，也不阻止父容器塌缩或嵌套挤压——必须配合 min-width: 0（主轴为 row 时）或 min-height: 0（主轴为 column 时），并确保图标是直接 flex item。
为什么 flex-shrink: 0 单独加在图标上没用？
浏览器看到 flex-shrink: 0 确实不参与收缩运算，但图标作为替换元素（<svg>、<img> 或伪元素）默认带 min-width: auto，这个隐式约束会强制“最小宽度不能小于内容固有宽”，导致 flex 布局卡死计算逻辑，最终图标被压成细线或撑破容器。
- 常见失效场景：SVG 没设
width，只靠flex-shrink: 0→ 渲染为 0 宽度 - 伪元素
::before在display: flex的<li>里，没加min-width: 0→ 换行后图标错位或截断 - 图标包在
<div class="icon-wrapper"><svg></svg></div>里，flex-shrink: 0加在 wrapper 上 → 真正要保形的是<svg>，无效
min-width: 0 是关键隐藏开关
它不是为了“设最小宽度”，而是告诉 Flex 引擎：“这个元素可以安全地收缩到 0，别按原始尺寸卡住布局”。对图标类替换元素，这步比 flex-shrink: 0 更底层、更必要。
- 主轴为水平（
flex-direction: row）→ 必须加min-width: 0 - 主轴为垂直（
flex-direction: column）→ 改用min-height: 0 - 旧版 Safari（iOS 14.4 及更早）对
min-width: fit-content支持差，min-width: 0兼容性更稳 - React/Vue 动态插入 SVG 时，漏掉这句会导致加载瞬间闪动或高度坍缩
SVG 图标必须额外控制宽高比例
flex-shrink: 0 和 min-width: 0 能防压缩，但拉伸仍是独立问题。SVG 默认不锁定宽高比，flex 布局会强行套用主轴尺寸。
立即学习“前端免费学习笔记（深入）”；
- 显式设
width: 1em或具体值（如width: 16px），删掉height属性，让浏览器按比例缩放 - 确认 SVG 根元素有
preserveAspectRatio="xMidYMid meet"（多数工具默认生成，手写易漏） - 避免写
width: 100%; height: 100%—— 这会覆盖 intrinsic ratio，直接拉伸变形 - 若用伪元素渲染 SVG，
background-size: contain配合min-width: 0更可靠
伪元素图标（::before）的特殊处理
在 display: flex 的列表项中，::before 被视为匿名 flex item，默认继承 flex-shrink: 1。多行文本下它会被压缩，导致背景图显示不全。
- 必须在
::before规则里加flex-shrink: 0和min-width: 0 -
display: block或display: inline-block均可，但flex-shrink: 0是语义更清晰的解法 - 别依赖
align-self: center—— 它只控制定位，不干预宽高，加了也防不了变形 - 用 DevTools 查看 computed styles，确认
flex-shrink确实为 0，且父元素display是flex或inline-flex
真正容易被忽略的，是图标是否作为**直接 flex item**、父容器有没有隐式嵌套 flex、以及 min-width: 0 是否落在了正确的元素层级上——这些细节一漏，flex-shrink: 0 就成了摆设。
