最稳最易维护的多图并排水平居中方案是外层容器设 display: flex 与 justify-content: center；需为每张 img 添加 flex: 1、max-width: 100%、height: auto 和 min-width: 0，父容器加 gap 和 flex-wrap: wrap。
用 flex 布局让多张图片并排且水平居中
最稳、最易维护的方案是外层容器设 display: flex，配 justify-content: center。它天然支持响应式折行，不依赖固定列数，也不需要写一堆媒体查询。
常见错误现象：图片挤成一排后溢出容器、小屏出现横向滚动条、某张图突然变窄或错位——基本都是漏了 max-width: 100% 或没处理 min-width: 0。
- 父容器加
display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; - 每张
<img>加flex: 1; max-width: 100%; height: auto; - 必须加
min-width: 0（可写在 img 上或用flex-shrink: 1），否则大图会撑开容器 - 如果父容器高度固定（比如
height: 200px），给img加height: 100%; object-fit: cover;防止拉伸或留白
用 grid 实现“至少 N 列”的响应式等宽排列
适合明确要求“小屏至少 1 列、中屏至少 2 列、大屏铺满”的场景。比手写断点更干净，也避免了 flex 在极端窄屏下把图压成细条的问题。
错误写法：grid-template-columns: repeat(3, 1fr) —— 这会强制三列，窄屏直接溢出。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确写法：
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; -
minmax(240px, 1fr)表示每列最小 240px，空间够就自动均分；不够就合并列数 -
auto-fit和auto-fill的区别：前者会收缩空轨道，后者保留空位，一般选auto-fit - 图片自身只需
width: 100%; height: auto;，不用 flex 相关属性
带图说（<figcaption></figcaption>）时怎么防止错行
<figcaption></figcaption> 默认是块级元素，和 <img> 并列写会导致每组占满一行。这不是 bug，是规范行为。
别这样写：<img><figcaption>标题</figcaption><img><figcaption>标题</figcaption> —— 每个 <figcaption></figcaption> 都会强制换行。
- 必须用
<figure></figure>或<div class="card"> 把每张图 + 标题包成一个单元 <li>对这个单元设 <code>display: inline-block或display: flex，再统一控制排列 - 若用
inline-block，父容器加font-size: 0消除 HTML 换行符产生的间隙；子元素里再设回font-size: 16px - 若用
flex，记得给单元加flex: 1和min-width: 0，不然图说文字过长会撑开整个单元 - 想靠
margin居中，得先让图片变成块级：display: block，再加margin: 0 auto - 但这只适用于单图；多图必须靠容器级布局（flex/grid）来统一对齐
- 另外，
width: 100%或max-width: 100%下，margin: auto失去宽度参照，也会失效
为什么 margin: 0 auto 不能直接用于多图排列
因为 margin: 0 auto 是单元素居中手段，对多个兄弟元素无效。你给每张图都加，结果是每张图在自己“行内”居中，不是整体居中。
另一个坑：有人把所有 <img> 包进一个 <div> 再加 <code>margin: 0 auto，但忘了设 display: block —— <img> 默认是 inline，margin 水平方向根本不起作用。
真正容易被忽略的是 min-width: 0 —— 它不是“锦上添花”，而是 flex item 在响应式缩放时不出问题的底线。没加它，图片尺寸稍大一点，整个布局就可能崩掉。
