flex-wrap: wrap 是图片平铺换行的必要前提，需配合父容器明确宽度；图片间距推荐使用 gap 而非 margin，以避免首尾空白和响应式错位。
flex-wrap: wrap 是图片平铺的必要前提
单靠 display: flex 默认是单行排列，超出容器宽度时图片会被压缩或溢出。必须显式设置 flex-wrap: wrap，让子项在空间不足时换行。注意：父容器需有明确宽度（如 width: 100% 或固定值），否则 wrap 可能不触发——这是最常见的“写了 wrap 却不换行”原因。
图片间距不能只靠 margin，要配合 justify-content 和 gap
用 margin 给每张图片加左右间距会导致首尾多出空白，且响应式下易错位。更可靠的方式是：
- 用
gap: 12px（推荐）：现代浏览器支持良好，作用于所有相邻项之间，包括行与行之间； - 若需兼容老版本 Safari（justify-content: space-between + 所有图片设为等宽（如
flex: 0 0 calc(33.333% - 8px)），但需手动计算减去的间隙值； - 避免同时用
gap和大margin，否则间距会叠加。
图片尺寸失控？用 flex-shrink 防止压缩
默认情况下，图片作为弹性子项可能被强制缩小（尤其在小屏幕下）。关键控制点：
-
flex-shrink: 0必须加在图片或其外层<div>上，否则img会随容器缩放失真； - 若希望图片等宽铺满整行，可用
flex: 1 0 auto+ 统一设max-width； - 不要对
img直接设width: 100%而不配height: auto，否则比例错乱； - 常见错误：
flex: 1看似简洁，实则隐含flex-shrink: 1，图片会被压扁。
响应式断点要重设 flex-basis，不是只改容器宽度
单纯用媒体查询改父容器宽度，图片仍按原 flex-basis 排列，容易出现一行塞不满、留白过大。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 给图片设基础
flex-basis: calc(50% - 8px)（双列），在@media (max-width: 768px)中改为flex-basis: calc(100% - 8px)（单列）； - 如果用了
gap，记得在断点中同步调整它，比如从gap: 16px改为gap: 12px，避免小屏间隙过大； - 别忘了给图片加
max-width: 100%和height: auto，否则大图在窄屏下会撑破容器。
真正麻烦的是混合尺寸图片（比如竖图+横图）混排时，flex-wrap 无法自动对齐行高。这时候得放弃纯 Flex，要么 JS 计算，要么切到 CSS Grid。
