flex-wrap: wrap生效需父容器设显式宽度，配gap替代margin控间距，图片需flex-shrink: 0防压缩，列数切换靠flex-basis媒体查询，混排竖横图建议改用Grid。
flex-wrap: wrap 是解决移动端图片换行问题的必要开关，但光开它还不够——多数“不换行”“错位”“留白过大”问题，都出在配套属性没配对。
flex-wrap: wrap 为什么有时不生效？
最常见原因是父容器没设宽度或宽度为 auto，导致 flex 计算时认为“空间永远充足”。flex-wrap 只在空间不足时触发换行，而浏览器对“不足”的判断依赖于容器显式宽度（如 width: 100%、max-width: 1200px）或受限上下文（如内联块、绝对定位父级）。
- 检查父容器是否设置了
width或max-width；没有就加一条width: 100% - 避免把图片直接塞进
display: inline-flex容器——它默认收缩内容宽度，wrap很可能不触发 - 如果用了
position: absolute包裹 flex 容器，记得给该父级也设width，否则 flex 容器宽度坍缩为 0
图片间距用 margin 还是 gap？
用 gap。现代项目中，margin 给每张图加左右间距会导致首尾多出空白，小屏下容易撑破容器或产生不对称留白；gap 则只作用于相邻项之间，包括行与行之间，响应式更干净。
- 写法：父容器加
gap: 12px，图片本身不设margin - 兼容性注意：iOS Safari 14.5+ 支持
gap，老版本需回退到justify-content: space-between+ 所有图片设等宽（如flex: 0 0 calc(50% - 6px)） - 别同时用
gap和大margin，比如gap: 12px+margin: 8px，实际间距会变成 20px
为什么图片在小屏下被压缩变形？
因为默认 flex-shrink: 1，图片作为弹性子项会被强制缩小以腾出空间。这不是 bug，是 flex 的默认行为，但对图片不友好。
- 必须加
flex-shrink: 0到图片或其外层<div> 上<li>推荐写法：<code>img { flex-shrink: 0; max-width: 100%; height: auto; } - 避免只写
flex: 1——它隐含flex-shrink: 1，等于主动邀请压缩 - 若要等宽铺满，用
flex: 0 0 calc(33.333% - 8px)（三列）配合gap，而不是靠flex: 1拉伸 - 基础写法：
.img-item { flex: 0 0 calc(33.333% - 12px); }（三列，减去gap） - 小屏切两列：
@media (max-width: 768px) { .img-item { flex-basis: calc(50% - 12px); } } - 超小屏切一列：
@media (max-width: 480px) { .img-item { flex-basis: 100%; } } - 别忘了同步调
gap：小屏下gap: 8px比16px更合适
一行显示几张？靠 flex-basis 而不是媒体查询改容器宽度
只在媒体查询里改父容器 width，图片仍按原 flex-basis 计算，结果常是一行塞不满、留白一大片。真正起效的是控制每个图片的基准宽度。
真正麻烦的是竖图横图混排——flex-wrap 只管换行，不管行高对齐。这时候再怎么调 align-items 都难看，得切到 Grid 或 JS 补齐高度。别硬刚。
