最直接方案是父容器设 display: flex，图片设 display: block 和 max-width: 100% 防基线留白与宽高比崩坏，并用 gap 控制间距、flex-wrap: wrap 防溢出。
用 display: flex 让图片横向排列最直接
Flex 是目前最稳妥、语义清晰、响应式友好的方案，不需要浮动或 inline-block 的各种副作用。关键不是“怎么写”，而是“怎么避免错位和溢出”。
常见错误现象：img 默认是 inline 元素，有基线对齐导致底部留白；容器没设 width 或 overflow 时图片挤出视口；父容器没设 display: flex 却只给子元素加 flex 属性——这些都会让布局失效。
- 父容器必须加
display: flex，不是子元素加 - 给
img加vertical-align: top或display: block消除基线空隙 - 图片建议统一设
max-width: 100%和height: auto，防止宽高比崩坏 - 如果图片数量不确定，加
flex-wrap: wrap防止单行溢出（否则会缩小或隐藏）
<div style="display: flex; gap: 8px; flex-wrap: wrap;"> @@##@@ @@##@@ @@##@@ </div>
gap 比 margin 更安全地控制图片间距
用 margin 给每张图加右边距，最后一张会多出空白；用 gap 是 Flex 容器级属性，只作用于项目之间，不会影响首尾。
兼容性注意：IE 不支持 gap（包括 IE11），如需兼容，可回退为 margin-right + :last-child { margin-right: 0 }，但更推荐用现代 CSS 的渐进增强思路——多数项目已不需支持 IE。
-
gap: 12px等价于row-gap: 12px; column-gap: 12px - 若只要水平间距，写
row-gap: 0; column-gap: 12px更精确 - 不要同时用
gap和margin，容易叠加出双倍间距
图片等宽排列时慎用 flex: 1
想让三张图平分宽度？很多人直接写 flex: 1，结果图片被强行拉伸变形。因为 flex: 1 等价于 flex: 1 1 0%，基准宽度为 0，浏览器会按比例撑满，完全忽略原图尺寸。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
正确做法是保留图片原始宽高比，再约束容器行为：
- 用
flex: 0 0 auto（不放大、不缩小、按内容宽）+max-width控制上限 - 或用
flex: 0 0 calc(33.333% - 8px)（减去 gap 占位），配合box-sizing: border-box - 如果必须等宽且不失真，优先考虑
object-fit: cover配合固定容器尺寸
移动端图片横向滚动要加 overflow-x: auto
当图片太多、一行放不下又不想换行时，横向滚动是合理选择。但仅加 overflow-x: auto 不够——默认情况下容器不会产生滚动条，因为 Flex 子项会被压缩而非溢出。
- 必须加
white-space: nowrap阻止换行（对 inline 元素有效，但对 flex item 效果有限） - 更可靠的是：父容器设
overflow-x: auto+display: flex+ 所有img设flex-shrink: 0 - 别忘了加
-webkit-overflow-scrolling: touch提升 iOS 滚动流畅度
复杂点往往不在“怎么排”，而在“怎么应对不同数量、不同尺寸、不同设备”。Flex 能解决大部分问题，但每个 flex 属性值背后都有明确的计算逻辑，跳过理解直接套用，很容易在图片加载失败或动态插入时露出破绽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
