SVG在Flex中被拉伸的根本原因是align-items: stretch在交叉轴上强制撑高，需同时设flex: 0 0 auto、width: auto、height: auto、明确父容器高度，并删除SVG内联宽高属性，仅保留规范viewBox。
SVG在Flex中被拉伸，根本不是它“想变”，而是align-items: stretch在交叉轴上强制撑高
Flex容器默认align-items: stretch，而<svg>是替换元素（replaced element），它的固有尺寸（intrinsic size）会被浏览器当作“可拉伸依据”。当父容器有明确高度（比如height: 48px），且SVG没锁住自身弹性行为时，它就会被垂直方向强行撑满——哪怕原始是16×16，也会被拉成16×48，路径严重变形。
常见错误现象：align-items: center写了但图标还是被压扁；DevTools里看到SVG的computed height是48px，远超预期；用object-fit完全无效（它对内联<svg>不生效）。
- 别只改
align-items，先确认SVG是否直接作为flex item——中间套了<div>就失效 - 必须显式切断拉伸链：
svg { flex-shrink: 0; flex-grow: 0; flex-basis: auto; }（等价于flex: 0 0 auto） - 补上
width: auto; height: auto;，防止CSS重置样式（如Tailwind Preflight）覆盖固有比例 - 若父容器是
flex-direction: column，注意此时交叉轴是水平方向，align-items影响的是宽度，不是高度
viewBox + 内联width/height属性冲突，让浏览器在不同引擎里各算各的
SVG源码里如果同时存在width="24"、height="24"和viewBox="0 0 24 24"，Chrome可能宽容协调，Safari和IE11则会优先按内联宽高定死尺寸，再套viewBox做等比缩放——结果就是CSS写的width: 1em被无视，图标在不同浏览器里大小不一，还容易被Flex二次拉伸。
更隐蔽的是：用<img src="icon.svg">或CSS background-image时，这个冲突依然存在，只是你查不到HTML里的属性。
立即学习“前端免费学习笔记（深入）”；
- 彻底删掉SVG文件根
<svg>标签上的width和height属性（包括width="100%"、height="auto"） - 只保留
viewBox，且值必须严格匹配内部路径坐标范围（如所有图形都在0–24之间，就只能写viewBox="0 0 24 24"） - 外部SVG文件也要检查源码，不能只改HTML引用方式
- 用
svg { width: 1em; height: 1em; }控制尺寸，别碰font-size——它对SVG本身无尺寸作用
父容器没设高度参照，align-items: center变成“对齐空气”
align-items: center不是魔法，它需要一个明确的交叉轴长度作为基准。如果父容器没设height、min-height或flex: 1（且外层有高度），那么center就找不到“中心在哪”，SVG会退回到默认的flex-start位置，看起来像被顶到顶部，甚至因baseline残留导致视觉偏移。
尤其当SVG和文字混排时，父容器的line-height会继承下来，进一步干扰高度计算，让“未定义高度”的问题更难察觉。
- 给父容器加
min-height: 48px或height: 48px（数值按实际需求定） - 避免依赖
line-height来撑高容器——它和SVG基线对齐逻辑冲突，纯属掩盖问题 - SVG自己必须设
display: inline-block（不能只靠父容器flex），否则align-items根本没作用对象 - 临时加
border: 1px solid red看SVG渲染边界是否对称，比猜更准
preserveAspectRatio="none" 是拉伸可控的开关，但只该用在明确需要失真适配的场景
当你真需要SVG填满整个容器（比如全屏背景图、表格头铺底），preserveAspectRatio="none"是唯一可靠方案。但它不是通用解法——加了它，SVG就放弃所有宽高比保护，viewBox只管坐标映射，不管视觉是否变形。小图标、带文字的SVG一旦加这个，立刻糊成一片。
这个属性必须写在SVG源文件的<svg>根标签上，CSS里无法覆盖。用<img>或background-image时，也得去改那个.svg文件本身。
- 仅在
background-image或<img>场景下启用preserveAspectRatio="none" - 内联SVG（
<svg>...</svg>）优先走flex: 0 0 auto+viewBox+ 明确父高 - 若用Tailwind，对应类是
flex-none（即flex: 0 0 auto），不是shrink-0单属性 - iOS Safari 15.4之前对无
width的内联SVG忽略max-width: 100%，所以width: 100%比max-width更稳
