Flex布局下SVG图标对齐无效且易缩放变形，因SVG是替换元素，默认inline导致baseline偏移，align-items只对几何中心生效；须显式设display:inline-block、viewBox、wrapper加flex-shrink:0，并分层控制占位与缩放锚点。
Flex 布局下 SVG 图标对齐偏移、缩放变形，不是 Flex 写错了，而是 SVG 作为替换元素，既不受 vertical-align 控制，也不自动响应 align-items: center——必须切断 baseline 干扰、显式控制尺寸锚点、分层施加约束。
为什么 align-items: center 对 SVG 无效
SVG 默认是 inline 元素，浏览器按字体度量决定其 baseline，和文字天然错位；align-items: center 只对子元素盒模型的几何中心起作用，不修正 baseline 偏移。结果就是图标“浮高”、文字“下沉”，尤其在 12–14px 小字号下肉眼可见。
- 删掉所有
vertical-align声明——Flex 下它无效，还掩盖真实问题 - 给
<svg>显式加display: inline-block（别用block，否则换行） - 父容器必须有明确高度参照，例如
min-height: 40px，否则align-items无轴可依 - 若混排文字，确保文字容器（如
<span>）的line-height和图标尺寸一致（比如都设为40px）
如何防止 SVG 在 Flex 容器中被压缩或拉伸
SVG 是替换元素，flex-shrink: 0 不作用于它本身，只对 flex 容器的直接子元素生效。常见错误是直接给 <svg> 加该属性，完全无效。
- 把
<svg>包一层<span>或<div>，然后给这个 wrapper 加flex-shrink: 0 - 必须声明
viewBox（如viewBox="0 0 16 16"），否则缩放无坐标基准，必然变形 - 删掉
<svg>标签上的width和height属性（哪怕写成100%），改用 CSS 控制尺寸 - 需要等比缩放时，补上
preserveAspectRatio="xMidYMid meet"；需填满容器则用preserveAspectRatio="none"
移动端 Safari 和 IE11 的兼容性陷阱
iOS 15.4 之前，Safari 在 Flex 容器中可能忽略 max-width: 100%，导致内联 SVG 卡在原始尺寸；IE11 则完全不认 align-items: center，静默降级为 flex-start。
立即学习“前端免费学习笔记（深入）”；
- 对 Safari：给 SVG 的 wrapper 加
min-width: 0，强制参与 flex 计算 - 对 IE11：父容器必须同时写
display: -ms-flexbox和-ms-flex-align: center - 避免用
gap控制图标间距——IE11 不支持，改用margin-inline-end: 6px - 测试时直接看 computed 样式里的
display是否真变成-ms-flexbox，别只信源码写了前缀
真正起效的三步微调法（非单属性解决）
别指望一个声明搞定。要分层切断干扰源：
- 先让图标脱离 baseline：给
<svg>加display: inline-block；字体图标（如<i class="bi bi-trash"></i>）也统一加display: inline-block - 再统一高度基准：父容器设
min-height: 40px，文字设line-height: 40px，图标用width: 16px; height: 16px;（比font-size: 16px更稳定） - 最后像素级收口：仍有 1–2px 偏移时，用
align-self: center单独调图标，或临时加margin-top: -1px；避免动全局align-items
最容易被忽略的是：SVG 的尺寸控制本质是两件事——flex 层控制“占位”，viewBox 层控制“缩放锚点”。缺一不可，且顺序不能颠倒。
