当 内容换行时，伪元素 ::before 默认参与 Flex 布局的收缩计算，导致宽度被压缩、背景图偏移或裁剪；通过设置 flex-shrink: 0 可强制其保持固有尺寸，确保图标稳定对齐。

当 `

` 内容换行时，伪元素 `::before` 默认参与 flex 布局的收缩计算，导致宽度被压缩、背景图偏移或裁剪；通过设置 `flex-shrink: 0` 可强制其保持固有尺寸，确保图标稳定对齐。

在使用 Flex 布局实现带自定义图标（如 SVG 背景图）的无序列表时，常见陷阱是：.featureList li 设置了 display: flex 和 align-items: center，而 ::before 伪元素作为第一个 flex item，默认具有 flex-shrink: 1。一旦列表项文本过长换行，Flex 容器会尝试压缩所有可缩放子项以适应空间——此时 ::before 的宽度（虽设为 1.125rem）仍可能被挤压，造成背景图显示不全、垂直错位或逐行左偏。

✅ 正确修复方式是在伪元素上显式禁用收缩行为：

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

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

下载

.featureList li::before {
  content: "";
  background-image: var(--icon);
  background-size: cover;
  display: block;
  width: 1.125rem;
  height: var(--height);
  flex-shrink: 0; /* ? 关键修复：阻止伪元素被压缩 */
}

⚠️ 注意事项：

• 不要仅依赖 min-width 或 flex-basis，它们无法阻止 flex-shrink 的默认行为；
• 避免将 ::before 设为 inline 或移除 display: block，否则 flex-shrink 不生效；
• 若后续需支持 RTL（从右向左）布局，建议补充 flex-direction: row 显式声明，增强可维护性；
• 对 .disabled 类中的图标，同样需确保其 ::before 也继承 flex-shrink: 0（CSS 会自然继承，无需重复书写）。

? 扩展建议：若需更高一致性与语义化，可考虑改用 background-image + padding-left 方案替代 Flex 布局，但当前修复已足够轻量且兼容性优秀（支持所有现代浏览器及 IE11+）。

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