flex: 1 1 auto 单独用于 img 不能可靠保持比例，因其 flex-basis: auto 优先取图片原始宽度，导致 max-width: 100% 时机错位、height: auto 失效；须配合 max-width: 100%、height: auto 和 flex: 1 1 0（或 min-width: 0）才可稳定缩放。
直接说结论：flex: 1 1 auto 单独用在 <img> 上，**不能可靠保持图片比例**，反而容易导致拉伸、压缩或换行错位。真正起作用的是组合约束，不是 flex 值本身。
为什么 flex: 1 1 auto 会让图片变形
因为 flex: 1 1 auto 的第三项 flex-basis: auto 会取图片原始宽度（比如 1200px）作为初始尺寸，然后在容器里强行按比例分配剩余空间——但图片是替换元素，浏览器先按这个“原始宽”布局，再套 max-width，时机错位。结果就是：宽被压窄了，高却还卡在原始值上，height: auto 失效。
-
flex-basis: auto尊重固有尺寸，对文字合理，对大图就是灾难 - 父容器没设
width或max-width时，100%无参照，max-width: 100%形同虚设 - 旧版 Safari 对
img在flex: 1 1 auto下的max-width支持不一致，常出现突然溢出
flex: 1 1 0 才是更安全的起点
把 flex-basis 显式设为 0，等于告诉 Flex：别管图片多大，从零开始分空间。这时 max-width: 100% 才能真正生效。
- 必须搭配
max-width: 100%和height: auto，三者缺一不可 -
flex: 1 1 0等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0 - 若还需防极端收缩（比如嵌套多层 flex），加
min-width: 0兜底 - 示例写法：
img { max-width: 100%; height: auto; flex: 1 1 0; min-width: 0; }
什么时候真该用 flex: 0 0 auto
当你需要图片「不参与弹性分配，只按自身比例缩放」时——比如图册中每张图独立响应父容器宽度，又不想被 flex 拉扯。
- 禁用收缩和拉伸：
flex: 0 0 auto（即flex-grow: 0; flex-shrink: 0; flex-basis: auto） - 仍需
max-width: 100%+height: auto，否则比例守不住 - 若父容器是
flex-direction: column，记得检查align-items: stretch是否在水平方向拉宽图片；改成align-items: flex-start - 常见误用：给
<img>直接加width: 100%——这会强制拉伸，破坏比例
复杂嵌套中图片消失或变细长的根因
不是 CSS 写错了，而是 flex 层级间默认的 min-width: auto 在作祟。祖先 flex 容器可能把图片盒模型锁死在内容宽，导致 max-width: 100% 失去作用点。
- 最简兜底方案：
min-width: 0加在图片上（不是父容器） - 避免在图片父级
<div> 上设 <code>width、max-width或overflow: hidden，这些会干扰尺寸计算链 - 如果要求等宽等高（如头像网格），
flex天然吃力，应优先考虑grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)))
真正难的不是写哪条规则，而是理解浏览器在 flex 分配阶段如何处理替换元素——它先算盒模型，再套样式。所以所有“保持比例”的方案，本质都是抢在盒模型固化前，用 flex-basis 和 min-width 把控制权拿回来。
