align-items: center不生效主因是父容器未设display: flex或height/min-height，子元素非直接flex item，或图标等inline元素受baseline干扰；需显式声明flex-direction: row、重置vertical-align与line-height，并用gap或margin-left: auto控制间距。
为什么 align-items: center 有时不生效？
常见情况是父容器没设 display: flex，或者子元素本身是块级元素（比如 <div> 包裹图标和文字）但没设 flex-direction: row。Flex 的垂直对齐只对直接子元素起作用，且依赖主轴方向。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保列表项（
<li>或<div>）是 flex 容器：display: flex+align-items: center - 显式声明
flex-direction: row（默认值，但显式写更防误） - 图标用
<svg>或<i>，避免它意外换行或受vertical-align干扰 - 文字部分别用
display: block或flex: 1占满剩余空间，否则可能被图标挤出视区
flex: 1 和 margin-left: auto 哪个更适合文字右对齐？
两者都能把文字“推到右边”，但行为不同：flex: 1 让文字容器弹性撑开，适合内容长度不一的场景；margin-left: auto 是靠外边距“挤”过去，更轻量、无计算开销。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 文字固定短（如“编辑”“删除”）→ 用
margin-left: auto，简洁可靠 - 文字长度波动大（如文件名+扩展名）→ 用
flex: 1+text-align: right，避免溢出或截断 - 图标尺寸不统一（比如不同 SVG viewBox）→ 给图标加
flex-shrink: 0，防止被压缩变形
图标和文字间距怎么控制得既稳定又响应式？
用 gap 最稳妥，它专为 flex/gird 设计，不会触发重排，也不受 margin 折叠影响。但 IE 不支持，需 fallback。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 现代项目直接用
gap: 8px（推荐 4px/8px/12px 等偶数步进） - 要兼容 IE → 改用
margin-left在文字容器上（图标不加 margin，避免首项多空隙） - 响应式调整：用
@media (max-width: 768px)把gap减半，或改用flex-direction: column垂直堆叠 - 别用
padding模拟间距——它会让点击区域变大，但语义上不属于“间隔”
为什么 Safari 下图标偶尔下沉 1px？
这是 Safari 对 align-items: center 在 inline-level 元素（如 <svg>、<i>）上基线对齐的遗留处理问题，尤其当图标未设 vertical-align: middle 或未显式设高宽时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图标统一加
vertical-align: -0.125em（比middle更准，适配多数 icon font 和 SVG） - 或更彻底：图标容器设
line-height: 0，内部<svg>设height和width（如16px），并flex-shrink: 0 - 避免用
font-size控制图标大小——它会随父文本缩放，导致对齐漂移
