必须给img加flex: 1、min-width: 0、height: auto和object-fit（需同时设宽高），否则因替换元素默认min-width: auto及flex-basis:auto，图片会撑开父容器并导致比例失真或换行失效。
Flexbox 是目前最可靠、最少副作用的响应式图片布局方案，但直接套用 display: flex 很容易让图片溢出、错行或比例失真——关键不在“用不用”，而在“怎么约束子元素”。
为什么 img 在 flex 容器里会撑开父容器？
因为 <img> 是替换元素，默认有固有尺寸；当父容器没设 height 或没启用弹性收缩时，flex-grow: 1 会无限制拉伸它，尤其在 Safari 和旧版 Edge 中更明显。
- 常见现象：
#container高度塌陷、出现横向滚动条、图片高度远超容器 - 根本原因：缺少对
img的显式弹性控制（仅靠max-width: 100%不够） - 必须配合：
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0）+min-width: 0（防止内容宽度干扰收缩） - 推荐写法：
.image-wrapper img { flex: 1; min-width: 0; height: auto; object-fit: contain; }
object-fit 加在哪才生效？
object-fit 只对替换元素（如 <img>、<video></video>）本身有效，加在父容器上完全无效。
- ❌ 错误：
.flex-container { object-fit: cover; }→ 浏览器直接忽略 - ✅ 正确：
img { object-fit: contain; width: 100%; height: 100%; }（注意：必须同时设宽高，否则contain无参照） - 场景选择：
contain适合预览/图标网格（完整显示，留白）；cover适合封面/背景（填满，可能裁剪） - 兼容性提醒：IE 不支持
object-fit，需搭配background-image回退方案
如何让图片网格自动换行且列数随容器变化？
靠 flex-wrap: wrap + flex-basis 控制最小单元格宽度，比媒体查询更轻量、更动态。
- 核心组合：
.grid { display: flex; flex-wrap: wrap; gap: 8px; }+.grid-item { flex: 1 1 200px; } -
200px是“理想最小宽度”，不是固定值：容器宽 600px → 最多 3 列；宽 450px → 自动缩为 2 列 - 避免硬编码
width：设flex-basis而非width，确保收缩时能均匀分配剩余空间 - 如果要严格等宽（如卡片），改用
flex: 0 0 calc(33.333% - 8px)（需配合gap计算）
大图（如 4000×6000）导致布局崩溃怎么办？
超大分辨率图片在 Flex 容器中极易触发 Safari 的渲染异常或 Chrome 的高度计算错误，单纯 max-height 拦不住。
- 三重保险：
overflow: hidden（父容器）、flex: 1（img）、object-fit: contain（img） - 必须给直接父容器设
display: flex; flex-direction: column;（若为垂直流）或row（若为水平流），否则flex: 1不参与空间分配 - 慎用
height: 100vh：移动端 Safari 对vh解析不稳定，建议用flex: 1替代 - 真实案例：未加
min-width: 0时，一张竖图会让整行flex子项拒绝收缩，导致换行失效
最容易被忽略的是 min-width: 0 ——它不是可选项，而是解决 Flex 图片不收缩、不换行的开关。没有它，flex: 1 在多数浏览器里形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
