Flex布局控制图片排列的关键在于父容器设display: flex，再通过gap、flex-wrap、flex-direction等属性组合调节方向、间距、换行和缩放。
用 Flex 布局控制图片排列，关键不在图片本身，而在它的父容器——必须把图片统一包进一个 display: flex 的容器里，再通过属性组合调节方向、间距、换行和缩放。
图片横向并排（默认一行）
这是最常用场景。给父容器设 display: flex，图片会自动沿主轴（水平）排列：
- 加
gap: 12px控制图与图之间的空白，比用margin更干净，不干扰首尾 - 推荐设
flex-wrap: nowrap防止小图意外换行（尤其在窄屏下） - 每张
<img>加flex: 1+max-width: 100%，让它们等宽自适应，不溢出也不拉伸 - 若需固定比例或裁剪，可加
object-fit: cover和明确的父容器高度（如height: 200px）
图片自动换行（多行多列）
当图片数量多或屏幕变窄时，允许折行更友好：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 把父容器的
flex-wrap改成wrap - 用
justify-content: center让每行图片居中，避免左对齐留大片空白 - 每张图建议设
min-width: 240px（或按需调整），配合flex: 1，这样每行能自然容纳 2–4 张，不硬塞 - 避免只靠
width: 33.33%，它不考虑gap，容易错位
图片垂直排列（一列）
适用于图文卡片、侧边图集等场景：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
flex-direction: column - 加
align-items: center让所有图片水平居中 - 用
gap控制上下间距，比margin-bottom更可控 - 若图片高度不一，可统一设
height: 180px+object-fit: cover保持视觉整齐
图文混排（图左文右 / 图上文下）
不是单独排图，而是图和文字作为同级子元素一起布局：
- 外层容器必须是同一个
display: flex，不能把图、标题、段落分别放在不同块里 - 图+文并排：设
flex-direction: row+align-items: center垂直居中 - 图+文上下：改用
flex-direction: column+align-items: center水平居中 - 文字区用
flex: 1占满剩余空间，防止被图片挤跑
