用flex或grid可实现多图响应式排列：flex通过flex-wrap和flex:1实现等宽自适应换行，需设max-width:100%和min-width:0；grid用auto-fit与minmax实现列数响应式，gap控间距更安全；figure包裹img+figcaption防错行；显式宽高或aspect-ratio防布局抖动。
直接用 display: flex 或 display: grid 就能搞定多图响应式排列，不需要 JS 计算、Canvas 合成，也不该用 float 或 inline-block 强撑——前者清浮动麻烦，后者间隙难控、换行逻辑混乱。
flex 实现自动换行的等宽拼图布局
适合图数不固定、小屏要折行、宽屏尽量铺满的场景。核心是容器设 display: flex + flex-wrap: wrap，每张图用 flex: 1 + max-width: 100%。
-
flex: 1让图片平分可用宽度，自动扣除gap占位，比写死width: 33.333%更稳 - 漏掉
max-width: 100%会导致原始尺寸大的图撑破容器；只设width可能拉伸小图 - 必须加
min-width: 0：Flex item 默认min-width: auto，窄屏下拒绝缩小，引发横向滚动条或错行 - 图片本身加
height: auto保比例；若父容器有固定高（如height: 200px），则用object-fit: contain避免裁剪
grid 实现固定列数的响应式网格
适合明确要“最小 250px 才分列”或“始终至少 2 列”的场景。关键表达式是 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))。
-
minmax(250px, 1fr)表示每列至少 250px，空间够就均分；空间不足时自动合并为单列，不是强行换行 - 用
gap控制间距，比给每个img加margin更安全——margin会影响网格轨道计算 - 图片只需
width: 100%+height: auto；想等高就加align-items: start，避免底部对齐拉伸 - IE11 不支持 Grid，如需兼容，退化方案是
display: inline-block+font-size: 0清除 HTML 换行符间隙
带图说（figcaption）时如何避免错行
figcaption 是块级元素，直接和 img 并列会强制每组占满一行。正确做法是把每张图+文字包进一个语义容器里再统一控制。
- 结构必须是
<figure><img><figcaption>xxx</figcaption></figure>，不能是<img><figcaption></figcaption><img><figcaption></figcaption> - 对
figure设display: inline-block或display: flex；若用inline-block，父容器要加font-size: 0消除间隙，子元素里再设回正常字号 - 别忘了给
figcaption显式加text-align: center或其他对齐样式，它默认左对齐且无内边距 - 如果图说文字过长，建议加
white-space: normal和word-break: break-word防溢出
加载前防抖动与性能细节
图片加载前空白区域跳动（layout shift）很影响体验，尤其在 LCP 等核心指标上。
- 务必给
img显式声明width和height属性（非 CSS），浏览器才能提前预留空间 - 用
aspect-ratio: 4/3（或对应比例）替代固定高宽，更灵活且兼容现代浏览器 - 加
loading="lazy"延迟非视口内图片加载，但首屏图建议去掉 lazy，避免白屏 - 若用
object-fit: cover，注意它可能裁剪内容，contain更安全但留白；两者都依赖显式宽高或aspect-ratio
真正容易被忽略的是 min-width: 0 和显式宽高——前者让 Flex item 能缩得足够小，后者让浏览器不用重排。这两个点不处理，哪怕代码看着全对，也常在小屏或加载瞬间崩掉布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
