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></button>，但没配 min-width: 0 → 浏览器默认加 min-width: auto，锁死最小宽度，flex-shrink: 0 形同虚设
• <img> 被包在 <div> 里，<code>flex-shrink: 0 却加在 <div> 上 → 必须加在 <code><img> 本身才生效

  哪些元素必须用 flex: 0 0 auto 替代单独写 flex-shrink: 0？

  对尺寸敏感的替换元素，flex: 0 0 auto 比单写 flex-shrink: 0 更稳妥，它同时锁死增长、收缩和基准尺寸，且优先级高于 width：

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • <img>（头像、Logo、商品图）—— 压缩即失比例，还必须配 width: auto; height: auto; min-width: 0
  • 带图标的 <button></button> —— 图标缩成像素点就不可识别，需额外加 min-width: 0 才释放限制
  • 搜索栏里的提交按钮 —— 输入框用 flex: 1，按钮必须 flex: 0 0 40px 或 flex: 0 0 auto
  • 固定宽侧边栏、表单中带单位的输入框（如 “px” 文本）—— 基准尺寸必须明确，不能依赖 auto fallback

  移动端图片变形的典型组合陷阱

  移动端问题往往不是单一属性导致，而是几个默认行为叠加：

  • 父容器用了 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 配合方式。