当 CSS 列表项（li）文本超出单行时，伪元素 ::before 图标因 flex 默认收缩行为发生偏移，导致背景图标错位或截断；通过为伪元素添加 flex-shrink: 0 可强制其不缩放，确保多行文本下图标位置稳定、完整可见。
当 css 列表项（`li`）文本超出单行时，伪元素 `::before` 图标因 flex 默认收缩行为发生偏移，导致背景图标错位或截断；通过为伪元素添加 `flex-shrink: 0` 可强制其不缩放，确保多行文本下图标位置稳定、完整可见。
在基于 Flexbox 构建的带图标列表（如定价页功能清单）中，常见做法是使用 li::before 伪元素渲染自定义 SVG 图标（如勾选标记或叉号），并通过 display: flex 实现图标与文本的水平对齐。但当某项文本内容较长、自动换行时，li 的 flex 子项（即 ::before 伪元素和文本内容）会因默认的 flex-shrink: 1 行为发生不均衡收缩——伪元素宽度被压缩，导致背景图显示不全、位置左移，甚至完全不可见。
根本原因：
.featureList li 设置了 display: flex 和 align-items: center，其内部实际包含两个“视觉子项”：伪元素 ::before 和文本节点。尽管伪元素未显式声明为 flex 项目，但现代浏览器会将其视为匿名 flex 项参与布局。而 ::before 默认继承父级 flex-shrink: 1，在空间不足时主动缩小，破坏了预设的 1.125rem 宽度和背景图完整性。
解决方案：
为 li::before 显式声明 flex-shrink: 0，阻止其在 flex 容器中被压缩：
.featureList li::before {
content: "";
background-image: var(--icon);
background-size: cover;
display: block;
width: 1.125rem;
height: var(--height);
flex-shrink: 0; /* ✅ 关键修复：禁止收缩 */
}? 提示：也可将 display: block 改为 display: inline-block，但 flex-shrink: 0 是更语义清晰、兼容性更优的解法（支持所有现代浏览器及 IE11+）。
完整优化后的 CSS 片段（含增强可维护性）：
立即学习“前端免费学习笔记（深入）”；
.featureList {
--color: #000;
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300C853' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
--height: 0.875rem;
margin: 0 0 2.75rem;
padding: 0;
font-weight: 500;
}
.featureList li {
color: var(--color);
margin-bottom: 2rem;
display: flex;
align-items: flex-start; /* 推荐改为 flex-start，避免多行文本垂直居中导致基线错位 */
gap: 1rem;
}
.featureList li::before {
content: "";
background-image: var(--icon);
background-size: cover;
background-repeat: no-repeat;
width: 1.125rem;
height: var(--height);
flex-shrink: 0; /* 必须添加 */
margin-top: 0.25rem; /* 可选：微调图标垂直对齐，适配多行文本首行 */
}
.featureList li:last-child {
margin-bottom: 0;
}
.featureList li.disabled {
--color: #b1b8c9;
--height: 1.125rem;
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F44336' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}额外建议：
- 将 align-items: center 改为 align-items: flex-start，避免多行文本因垂直居中导致首行文字与图标顶部不对齐；
- 添加 background-repeat: no-repeat 防止图标意外平铺；
- 使用内联 SVG Data URL 替代外部文件，提升加载性能与可控性；
- 对 .disabled 项单独调整 margin-top 或 height，确保不同图标尺寸下视觉一致性。
此方案无需修改 HTML 结构，零侵入、高兼容，是解决多行列表项图标对齐问题的标准化实践。
