使用 flex-wrap 和 gap 可解决图片列表布局错乱问题，通过设置容器 display: flex、flex-wrap: wrap 实现自动换行，利用 gap 统一设置间距避免 margin 导致的对齐问题，结合 calc() 计算子项宽度并减去 gap 影响，设定 flex: 0 0 auto 防止压缩，配合 object-fit: cover 保持图片比例，确保布局在不同屏幕下整齐自适应。
图片列表布局错乱，通常是因为容器宽度不够、子项尺寸不统一或缺乏弹性控制。使用 flex-wrap 和 gap 能有效解决这类问题，让图片排列整齐、间距一致。
启用 Flex 换行布局（flex-wrap）
当图片数量多或容器变窄时，单行显示会导致溢出或压缩变形。通过设置 flex-wrap: wrap，可以让项目在空间不足时自动换行。
示例：
.image-list {
display: flex;
flex-wrap: wrap; /* 允许换行 */
justify-content: start; /* 从左侧开始排列 */
}
使用 gap 统一间距
传统用 margin 控制间距容易导致每行首尾不对齐，而 gap 是专为网格和弹性布局设计的间隔属性，能自动处理项目之间的行距和列距，无需额外清除边距。
示例：
.image-list {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 同时设置横向和纵向间距 */
}
.image-item {
flex: 0 0 calc(25% - 16px); /* 四列布局，减去间距影响 */
height: 200px;
}
确保子项尺寸兼容容器
为避免最后一行图片拉伸或对不齐，建议给子项设置固定宽度或基于百分比的弹性尺寸，并配合 box-sizing 精确控制盒模型。
立即学习“前端免费学习笔记（深入）”；
关键点：- 使用
calc()动态计算项目宽度，扣除 gap 影响 - 设置
flex: 0 0 auto防止项目被压缩 - 图片本身用
object-fit: cover保持比例不形变
基本上就这些，用好 flex-wrap 和 gap，再配合合理的尺寸计算，图片列表就能自适应各种屏幕，不再错乱。
