为什么CSS flex-grow在存在大尺寸图片时分配空间不均？

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> 时
• 避免混用：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，缺一不可。只处理图片，文字照样卡住；只处理文字，图片照样撑爆。