flex-grow失效的根本原因是图片等替换元素默认min-width: auto，必须显式设min-width: 0（非0%或unset）并配合flex: 1 1 0、max-width: 100%才能使其从0起点参与空间分配。
flex-grow 分配空间前，图片的 min-width: auto 会卡住起点
浏览器给 <img> 这类替换元素默认加了 min-width: auto，哪怕你写了 flex-basis: 0 或 flex: 1 1 0，它也不会从零开始分空间——而是先按图片原始尺寸占位，再把“剩余空间”分给其他项。结果就是：一张 800px 宽的图撑开整个主轴，其他子项挤在旁边，flex-grow 彻底失效。
常见现象：flex: 1 的三列布局里，中间插了一张大图，左右两栏被压得极窄甚至换行；或者卡片列表中某张图特别大，整行宽度失衡。
- 必须显式重置：
min-width: 0（不是min-width: unset，后者可能继承父级） - 搭配
max-width: 100%防止溢出容器 - 如果图片是背景图或可裁剪，优先用
object-fit: cover+height控制，避开 inline 尺寸干扰
flex-basis: 0 和 flex: 1 1 0 的区别直接影响图片是否被拉伸
flex: 1 等价于 flex: 1 1 0%，而 0% 在某些浏览器（尤其是旧版 Safari 和 IE11）里会被解析为“内容宽度”，不是真 0。图片一上来就带尺寸，0% 就没意义。真正起效的是 flex: 1 1 0（注意是数字 0，不是 0%），它强制起点为 0px，让所有子项站到同一起跑线。
实操建议：
- 统一用
flex: 1 1 0替代flex: 1，尤其当子项含图片、<input>、<iframe></iframe>时 - 避免混用：
width和flex-grow同时设——width会覆盖flex-basis，导致分配逻辑混乱 - 检查父容器是否设置了
box-sizing: border-box，否则padding和border会额外吃掉空间，让“剩余空间”变小甚至为负
white-space: nowrap 或长无空格字符串让 flex-shrink 失效，间接破坏 flex-grow 分配
当图片旁有长 URL、代码片段或未设 word-break 的文本时，即使 flex-shrink: 1 开着，浏览器也无法压缩该子项——因为内容不可折行，最小宽度被锁死。结果就是：这个子项占满可用宽度，其他项拿不到任何剩余空间，flex-grow 形同虚设。
典型场景：图文卡片里标题+描述+图片，描述是一段没空格的 base64 字符串。
- 对文本容器加
min-width: 0（和图片一样，关键！） - 设
overflow: hidden+text-overflow: ellipsis+white-space: nowrap（需配合width或flex-basis） - 或更稳妥：
word-break: break-all，但注意中文断词体验
gap 是唯一不影响 flex 分配逻辑的间隙方案
很多人用 margin-right 给图片右侧加空隙，结果最后一项多出空白，或触发 flex-shrink 异常收缩。这不是 flex-grow 的问题，而是 margin 干扰了“剩余空间”的计算基数。
gap 是 Flex 布局原生支持的间隙属性，它不参与主轴尺寸计算，只在子项之间插入空白，不影响 flex-basis 和 flex-grow 的任何一步。
- 必须用
gap，而不是margin实现子项间距 - IE11 不支持
gap，如需兼容，改用padding+margin负边距组合，但要额外加 wrapper 避免最后一项溢出 -
gap值会影响最终“剩余空间”大小，但它本身不改变分配比例——这点比手动算calc()可靠得多
min-width: 0，缺一不可。只处理图片，文字照样卡住；只处理文字，图片照样撑爆。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
