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></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></svg>，无效

min-width: 0 是关键隐藏开关

它不是为了“设最小宽度”，而是告诉 Flex 引擎：“这个元素可以安全地收缩到 0，别按原始尺寸卡住布局”。对图标类替换元素，这步比 flex-shrink: 0 更底层、更必要。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 主轴为水平（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 就成了摆设。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！