图片在行内不换行是因为 inline 元素不支持 flex 属性，应将图片包裹在 display: flex + flex-wrap: wrap 的容器中，并配合 flex-basis、gap 和 max-width: 100% 实现响应式折行；Grid 方案更简洁但不兼容 IE。
图片在行内不换行，display: inline 为什么失效？
因为 inline 元素本身不接受 width、height 和 flex 相关属性，强行设 flex-wrap 没用。浏览器会忽略对 inline 元素的 flex 声明——它压根不是 flex 容器的合法子元素类型。
真正要解决的是「让多个图片像文字一样自然流式排列、自动折行」，而不是强行给 img 加 display: inline 后再套 flex。
- 把图片包裹进一个容器（比如 ），并设该容器为
display: flex- 给容器加
flex-wrap: wrap，允许子项换行- 图片本身设为
flex: 0 0 auto或显式指定宽高，避免被拉伸- 容器需有明确宽度限制（如
width: 100%或固定值），否则 flex 容器默认撑满父宽，不触发换行flex-wrap: wrap下图片宽度怎么控制才不溢出？常见问题是图片宽度写死（如
width: 200px），导致小屏下一行只能塞 1–2 张，大量留白；或用width: 100%又让单张图占满整行。更合理的做法是结合
flex-basis+ 响应式约束：立即学习“前端免费学习笔记（深入）”；
- 用
flex: 0 0 calc(33.333% - 8px)实现每行最多 3 张（减去间隙） - 配合
gap: 8px控制间距，比margin更干净 - 图片加
max-width: 100%和height: auto，确保缩放不失真 - 如果需要等高对齐，可对图片父容器（即 flex item）设
min-height或用object-fit: cover
为什么用了
flex-wrap还是不换行？检查这几点这不是 flex 写错了，而是布局上下文没配对。最常漏掉的是：
- 父容器没设
display: flex，只写了flex-wrap: wrap—— 单独写flex-wrap无效 - 父容器宽度为
auto或未限制（比如在position: absolute且无left/right约束时），flex 容器无法判断何时该折行 - 图片被设了
white-space: nowrap（可能来自重置样式或继承） - 图片外层有
float或position: absolute，脱离了 flex 流程
快速验证：临时加
border: 1px solid red到父容器，看它是否按预期宽度渲染。替代方案：不用 flex，纯 CSS Grid 更简洁？
如果只是「等宽图片自动换行」，Grid 确实更直接：
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .image-grid img { width: 100%; height: auto; display: block; }相比 flex，Grid 不依赖容器宽度计算换行点，
auto-fill+minmax()能根据可用空间自动调整列数。但注意：grid在 IE 中完全不支持，若需兼容 IE11，必须回退到 flex 方案并手动写媒体查询。flex 的换行逻辑依赖容器宽度和子项基础尺寸，Grid 的换行逻辑由网格轨道定义驱动——这是根本差异，选哪个取决于你是否需要精确控制主轴顺序（flex 更适合流式内容排序）、还是更关注二维布局密度（grid 更适合画廊类场景）。
别忘了给图片加
vertical-align: top或display: block，否则img默认是inline，底部会有空白间隙，影响换行对齐。 - 给容器加
