flex-shrink: 0是唯一能从源头跳过Flex收缩计算的声明，但必须配合flex: 0 0 auto、width: auto、height: auto和min-width: 0才能确保图片按固有尺寸渲染并保持宽高比。
因为 width 在 Flex 容器里不是最终尺寸决定者，真正参与主轴计算的是 flex-basis，而所有子项默认带 flex-shrink: 1——只要容器空间不足，浏览器就直接无视你写的 width: 300px，按比例压缩。
flex-shrink: 0 是唯一能跳过收缩的开关
它让浏览器在空间分配阶段彻底忽略该元素的收缩逻辑，不参与任何比例计算。这不是“修复”，而是按规范主动关闭一个默认行为。
-
flex-shrink: 0兼容 IE10+（需加-ms-flex-negative: 0） - 别写
flex-shrink: -1，会被忽略并回退到1 - 不要全局重置
* { flex-shrink: 0 }，会破坏正常弹性行为 - 只对尺寸敏感的元素加：按钮图标、
<img>、头像、开关、短标签（如 “VIP”）
为什么只加 flex-shrink: 0 还是变形？
因为 flex-shrink: 0 只关掉了压缩，没定义尺寸起点。若 flex-basis 是 auto 且内容塌缩（比如空 <div> 或未加载的 <img>），元素仍可能坍缩成一条线。
-
<img>必须同步加min-width: 0，否则浏览器默认的min-width: auto会阻止它缩到合理尺寸 - 父容器本身被外层 Flex 压缩（比如嵌套 Flex），子项再怎么设
flex-shrink: 0也无框可守 - 误设了
flex-wrap: wrap，看起来像压缩，其实是换行；确认是否真需要单行显示 - 祖先元素有
overflow: hidden或text-overflow: ellipsis，配合默认white-space: normal导致文字换行，误判为挤压
最稳妥的写法是 flex: 0 0 auto
它等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto，显式锁死三项，避免被其他简写（比如 flex: 1）意外覆盖，也比单独写 flex-shrink: 0 更明确锚定尺寸起点。
立即学习“前端免费学习笔记（深入）”；
- 对图片更安全：
img { flex: 0 0 auto; width: auto; height: auto; min-width: 0; } - 百分比
flex-basis（如flex: 0 0 50%）依赖父容器宽度确定，若父容器是inline-flex或浮动，其宽度可能为0px，导致50%失效 - 过渡动画中
width无法插值，因起始值常为auto；改用min-width+width组合，或用transform: scaleX()避开 Flex 干扰
真正容易被忽略的，是图片是否作为**直接 flex item**、父容器是否有**隐式嵌套 flex**、以及**加载时机**带来的尺寸跳变——这些都比写错一行 CSS 更难调试。
