flex-shrink: 0真正起效的前提是元素为直接flex item，且父容器设display: flex/inline-flex；否则无效。需配合flex: 0 0 auto、width: auto、height: auto和min-width: 0才能稳定图标尺寸。
flex-shrink: 0 真正起效的前提是它被浏览器识别为 flex item 属性
如果 img 或 svg 不是直接子元素，而是包在 <div> 里再放进 Flex 容器，那么给 img 写 flex-shrink: 0 就完全无效——Flex 布局只对**直接 flex item** 生效。浏览器压根不解析这个声明。
常见失效场景：
- 父容器没设
display: flex或display: inline-flex - 用了
flex: 1这类简写，隐式覆盖了后面单独写的flex-shrink: 0 - 图标被包裹在 React/Vue 组件内部，真实 DOM 结构导致它不是直接 flex item
为什么只写 flex-shrink: 0 图标还是被压成像素点
flex-shrink: 0 只跳过收缩计算，不定义尺寸起点。浏览器 fallback 到 flex-basis: 0 时，svg 或 img 会坍缩；fallback 到 flex-basis: 100% 时又可能横向拉伸、纵向塌陷。
必须配合三要素才能稳住图标形态：
立即学习“前端免费学习笔记（深入）”；
-
flex: 0 0 auto—— 显式禁用伸缩，锚定 intrinsic size -
width: auto; height: auto—— 防止框架重置样式（如 Tailwind Preflight）覆盖原始比例 -
min-width: 0—— 解除替换元素默认的min-width: auto锁定，否则 flex-shrink: 0 被拦在计算外层
align-items: stretch 是隐藏的拉伸黑手
Flex 默认 align-items: stretch，在 flex-direction: row 下，它会强制所有子项（包括图标）填满容器高度。哪怕图标原始高只有 24px，父容器设了 height: 64px，它也会被硬拉高，宽高比直接崩坏。
这不是对齐问题，是尺寸劫持。解决方式：
- 改父容器的
align-items: flex-start或align-items: center - 或给图标加
align-self: flex-start（仅对直接 flex item 有效） - 若父容器是
flex-direction: column，则需关注min-height: 0和align-items对宽度的影响
SVG 图标要额外防拉伸
即使加了 flex-shrink: 0，SVG 仍可能被拉宽变矮——因为它的 width 和 height 默认是 auto，而 Flex 会强行套用主轴尺寸，忽略固有宽高比。
可靠写法：
- 显式设
width: 1em或width: 16px，删掉height属性，让浏览器按比例缩放 - 确保 SVG 根元素有
preserveAspectRatio="xMidYMid meet" - 避免用
width: 100%; height: 100%，这是强制拉伸，直接破坏比例
真正容易被忽略的是：图标是否作为直接 flex item、父容器是否有隐式嵌套 flex、以及 min-width: 0 是否落在了正确的层级上。
