flex-wrap: wrap 是九宫格换行的必需设置，否则小屏会挤压或溢出；需配合父容器宽度、flex-basis+min-width控制列数，object-fit: cover防图片变形，gap或margin处理间隙。
Flex-wrap 是九宫格换行的关键开关
不设 flex-wrap: wrap，九宫格在小屏上会强行挤压图片甚至溢出容器——因为默认值是 nowrap，所有子项被压在同一行。必须显式开启换行，Flex 才会在宽度不足时把多余项推到下一行。
常见错误是只写了 display: flex 就以为能自适应，结果在手机上看只显示 1–2 张图，其余消失或横向滚动。
-
flex-wrap: wrap是必需的，不能省略 - 父容器需有明确宽度（如
width: 100%或max-width），否则 Flex 无法判断何时该换行 - 避免给子项（图片容器）设固定像素宽，优先用百分比或
flex: 1配合min-width
每行三张图的宽度控制靠 flex-basis + min-width
想在桌面端稳稳显示三列、平板两列、手机一列，光靠 flex-wrap 不够，得约束每项最小宽度。直接写 width: 33.33% 在小屏会撑破布局，而纯 flex: 1 又可能让单张图过窄。
推荐组合：flex: 1 1 300px —— 表示“可伸缩、可收缩、基准宽度 300px”。这样在宽屏自动均分，窄屏到 300px 就触发换行，自然变成两列或一列。
立即学习“前端免费学习笔记（深入）”；
- 300px 是常用临界值，适配多数手机竖屏（设备宽度 ≈ 360–414px）
- 若内容含标题文字，可降到
250px避免文字折行难看 - 慎用
flex: 0 0 33.33%：它禁掉伸缩性，小屏下可能因边框/间距导致总宽超 100%，最后一项被挤到下一行
图片本身要防拉伸变形，object-fit 是必选项
九宫格里图片尺寸不一，直接设 width: 100%; height: 200px 会导致严重变形。CSS 的 object-fit 是专治这个的。
用 object-fit: cover 保持比例裁剪填充，比 contain 更适合卡片式布局——用户更在意图是否完整显示，而不是留白。
- 必须配合
height使用，否则object-fit无效；建议给图片容器设固定高，图片自身设height: 100% - 别忘了加
object-position: center，避免关键人物被裁掉 - 旧版 Safari（iOS 10–12）不支持
object-fit，若需兼容，得用背景图方案替代
间隙处理：gap 比 margin 更干净，但注意兼容性
用 gap: 12px 控制九宫格内边距，比给每个子项加 margin-right/bottom 少一堆 nth-child 计算。但它在 Firefox 旧版和 IE 中完全不支持。
如果项目要跑在微信内置浏览器（X5 内核）或钉钉客户端，gap 大概率失效，得降级。
- 现代项目可直接用
gap，简洁且无副作用 - 需兼容时，改用
margin+calc(33.33% - 8px)控制子项宽度，并用:nth-child(3n)清除右 margin - 别用
padding模拟间隙：它会让容器变大，容易破坏整体宽度计算
真正麻烦的不是写几行 Flex，而是图片加载后高度塌陷、服务端返回的宽高比千奇百怪、还有 iOS Safari 对 aspect-ratio 的延迟支持——这些都得靠容器占位或 JS 补偿，纯 CSS 很难一劳永逸。
