Flexbox布局可彻底解决图片列表对不齐问题：通过容器设display:flex、justify-content控制水平对齐，flex-wrap:wrap配合子项flex或min-width控制每行数量，img用object-fit和overflow:hidden保持比例，再辅以媒体查询和box-sizing:border-box统一盒模型。
用 Flexbox 布局可以彻底解决图片列表在不同屏幕下对不齐的问题。关键不是给图片设固定宽高，而是让容器控制排列逻辑，再配合合理的尺寸约束和对齐方式。
设置容器为 flex 并统一主轴对齐
给图片列表的父容器（比如 ul 或 div）设置 display: flex，并用 justify-content 控制水平对齐方式：
- justify-content: space-between —— 两端对齐，适合等宽卡片且需留白
- justify-content: center —— 居中排列，适合数量不定但希望视觉居中的场景
- justify-content: flex-start —— 左对齐（默认），搭配 flex-wrap: wrap 更稳妥
允许换行并控制单行项目数
加 flex-wrap: wrap 让子项自动换行，再通过子项（如 li 或 figure）的宽度控制每行个数：
- 例如设每个子项 flex: 0 0 calc(33.333% - 20px)，就能保证一行最多 3 个，间隙由 margin 控制
- 用 min-width 替代固定 width，比如 min-width: 240px，让小屏自动减少每行数量
- 避免同时设 width 和 flex，容易触发冲突导致错位
图片自身保持比例与对齐
子项内的 img 不要直接设 width:100%，而应：
立即学习“前端免费学习笔记（深入）”；
- 设 display: block 消除底部空白
- 用 object-fit: cover 或 contain 控制裁剪/缩放，配合 height: 100% 或固定高
- 外层容器设 overflow: hidden 防止图片溢出破坏布局
响应式断点微调更稳
在关键宽度（如 768px、1024px）用媒体查询调整子项宽度或 flex 基值：
- @media (max-width: 768px) { .item { flex: 0 0 calc(50% - 12px); } }
- @media (max-width: 480px) { .item { flex: 0 0 100%; } }
- 这样比纯百分比更可控，避免因小数计算误差导致最后一项掉行
不复杂但容易忽略的是：所有子项必须有相同的基础盒模型表现，建议统一设 box-sizing: border-box，并清除默认 margin/padding。Flex 布局本身不依赖图片尺寸，只要容器逻辑清晰，对齐问题就自然消失。
