flex-shrink: 0 是防止压缩的起点，但单独使用易失效；必须确保父容器启用 Flex、子元素为直接子项、替换元素配 min-width: 0，且优先采用 flex: 0 0 auto 显式锁定三项。
flex-shrink: 0 是防止压缩变形的起点，但它单独出现时大概率失效——真正起效需要同时控制三个层：父容器的弹性上下文、子元素的尺寸基准、以及替换元素的隐性约束。
为什么 flex-shrink: 0 加了还是被压扁？
这不是属性失效，而是它根本没被正确触发或被更高优先级规则覆盖：
- 父容器没设
display: flex或用了inline-flex→flex-shrink完全不解析 - 子元素写了
flex: 1这类简写 → 等价于flex: 1 1 0，会覆盖后面单独写的flex-shrink: 0 - 子项是
<img>或<button>，但没配min-width: 0→ 浏览器默认加min-width: auto，锁死最小宽度，flex-shrink: 0形同虚设 -
<img>被包在<div>里，flex-shrink: 0却加在<div>上 → 必须加在<img>本身才生效
哪些元素必须用 flex: 0 0 auto 替代单独写 flex-shrink: 0？
对尺寸敏感的替换元素，flex: 0 0 auto 比单写 flex-shrink: 0 更稳妥，它同时锁死增长、收缩和基准尺寸，且优先级高于 width：
-
<img>（头像、Logo、商品图）—— 压缩即失比例，还必须配width: auto; height: auto; min-width: 0 - 带图标的
<button>—— 图标缩成像素点就不可识别，需额外加min-width: 0才释放限制 - 搜索栏里的提交按钮 —— 输入框用
flex: 1，按钮必须flex: 0 0 40px或flex: 0 0 auto - 固定宽侧边栏、表单中带单位的输入框（如 “px” 文本）—— 基准尺寸必须明确，不能依赖
autofallback
移动端图片变形的典型组合陷阱
移动端问题往往不是单一属性导致，而是几个默认行为叠加：
立即学习“前端免费学习笔记（深入）”；
- 父容器用了
max-width: 100%但没设min-width→ 自身先塌缩，子项再怎么锁也没用 -
<img>没配object-fit: contain或cover，且父容器align-items: stretch（Flex 默认）→ 图片被垂直撑开，flex-shrink: 0失效 - 写了
width: 100%→ 它会覆盖 intrinsic 尺寸，干扰flex-basis计算，让flex-shrink: 0配合反而更易错乱 - iOS Safari 下若仍不均等，可试
min-width: 1px绕过其保护性渲染（比0更可靠）
最容易被忽略的是：当图片放在 flex-direction: column 的容器里时，flex-basis 控制的是高度而非宽度，此时要同步检查 max-height 和 object-fit 配合方式。
