图片列表换行不整齐主因是容器宽度变化或图片尺寸不一致，需用display: flex + flex-wrap: wrap配合gap、flex-basis及object-fit等统一控制布局，再通过媒体查询适配多端每行数量。
图片列表换行不整齐，通常是因为容器宽度变化或图片尺寸不一致，导致 flex 项目在换行时对齐错乱。用 flex-wrap 只是开启换行，真正解决“不整齐”问题，关键在于配合 justify-content、align-items 和 flex-basis 等属性统一控制布局行为。
确保父容器启用 flex 且允许换行
这是基础前提。只写 flex-wrap: wrap 不够，必须搭配 display: flex：
.gallery {
display: flex;
flex-wrap: wrap;
gap: 12px; /* 推荐用 gap 替代 margin，更可控 */
}注意：避免给子项（图片容器）设固定 width 后又加 margin，容易撑破行或留白不均。
统一子项宽度，避免因内容差异导致换行错位
图片原始尺寸不同，直接放进去会破坏网格感。推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 给每个图片外层容器设固定宽度（如
flex: 0 0 calc(25% - 9px)表示每行4个，含 gap 间距） - 图片用
width: 100%; height: auto;或object-fit: cover;保持比例 - 避免子项内联宽高或未重置的 padding/margin 干扰计算
例如一行显示3张图（含 gap）：
.gallery-item {
flex: 0 0 calc(33.333% - 8px); /* 100% ÷ 3 - gap/2×2 */
}
.gallery img {
width: 100%;
height: 180px; /* 固定高度 + object-fit 更稳 */
object-fit: cover;
}处理最后一行对齐问题
默认 justify-content: flex-start 会让最后一行左对齐，看起来“缺块”。可选方案：
-
justify-content: space-between;—— 首尾贴边，中间等距（适合数量固定或能接受间隙变化） -
justify-content: center;—— 整行居中（适合响应式下数量波动小） - 更稳妥：用
gap+flex-wrap: wrap+ 子项等宽，视觉上自然齐整，无需强求末行填满
补充：移动端适配建议
用媒体查询动态调整每行数量，比强行拉伸图片更可靠：
.gallery {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.gallery-item {
flex: 0 0 calc(50% - 4px); / 默认每行2张 /
}
@media (min-width: 768px) {
.gallery-item {
flex: 0 0 calc(33.333% - 4px); / 平板每行3张 /
}
}
@media (min-width: 1024px) {
.gallery-item {
flex: 0 0 calc(25% - 6px); / 桌面每行4张 /
}
}
这样无论屏幕怎么缩，每行数量清晰，换行自然整齐。
