flex布局是图片并排自适应的最稳方案，设容器display: flex+gap、图片flex:1+max-width:100%；grid适合固定列数响应式，用auto-fit与minmax；图说需包裹figure并设inline-block或flex；小屏应折行而非缩放，加载前用aspect-ratio防抖动。
用 display: flex 是当前最稳、最易控的方案，别再用 float 或靠 white-space: nowrap 强撑——前者要清浮动、后者一窄就溢出，还容易踩到间隙和换行逻辑混乱的坑。
flex 布局让图片并排且自适应宽度
核心是容器设 display: flex + gap，图片设 flex: 1 和 max-width: 100%，这样三张图在宽屏下等分，在窄屏下自动折行为单列（只要没加 flex-wrap: nowrap）。
-
flex: 1让每张图平分可用空间，比写死width: 33.333%更可靠，它自动扣除gap占位 - 必须加
max-width: 100%，否则原始尺寸大的图会撑破容器；只设width可能导致小图被拉伸 - 如果父容器高度固定（比如
height: 200px），给img加height: 100%和object-fit: contain，避免裁剪或留白 - 错误现象：图片错位、横向滚动条出现、某张图突然变细——大概率是漏了
max-width或没设min-width: 0（Flex item 默认最小宽度为内容宽度，会阻止缩小）
grid 实现固定列数+等宽响应式
适合明确要“始终显示 3 列”或“至少 2 列”的场景，grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 是关键表达式，它让浏览器按最小宽度自动算列数，比手写媒体查询更干净。
-
minmax(250px, 1fr)表示每列至少 250px，最多均分剩余空间；auto-fit会在空间不足时合并列，而不是强行换行 - 配
gap控制间距，比用margin更安全——不会影响网格轨道计算 - 图片本身只需
width: 100%+height: auto，不需额外flex属性；若要等高，加align-items: start防止底部对齐拉伸 - 兼容性注意：IE 不支持
grid，如需兼容 IE11，改用inline-block+font-size: 0清除空白符间隙
带图说（caption）时怎么避免错行
<figcaption></figcaption> 是块级元素，直接和 <img> 并列会导致每组占满一行。正确做法是把每张图和对应文字包进一个 <figure></figure> 或 <div class="card">，再统一设 <code>display: inline-block 或 display: flex。
- 不要这样写：
<img><figcaption>xxx</figcaption><img><figcaption>yyy</figcaption>——<figcaption></figcaption>会强制换行 - 推荐结构：
<figure><img src="..."><figcaption>描述</figcaption></figure>，然后对<figure></figure>设display: inline-block或flex - 若用
inline-block，父容器加font-size: 0消除 HTML 换行符产生的间隙；子元素里再把font-size调回来 - 图说文字居中用
text-align: center，垂直对齐用vertical-align: top（防止基线对齐导致底部空隙）
移动端强制单列时别硬塞三图
小屏上三张图并排不是“缩得小一点就行”，而是体验灾难：字看不清、点击区太小、左右滑动反人类。真正该做的是用媒体查询切换布局模式，而不是调 zoom 或 transform: scale()。
- 默认用
flex-wrap: wrap，让它自然折行；在@media (max-width: 768px)里设flex-direction: column或直接flex-basis: 100% - 别信“用 JavaScript 动态改 class 切换 layout”——纯 CSS 就能搞定，加 JS 只是引入不可靠性和重绘开销
- 如果真要横向滚动（比如商品画廊），用
overflow-x: auto+scroll-snap-type，但记得加-webkit-overflow-scrolling: touch提升 iOS 滚动手感 - 容易被忽略的一点：图片加载前的占位高度缺失，会导致页面抖动。给
img设aspect-ratio: 4/3或用 padding-bottom 百分比占位
