<p>九宫格图片用 display: flex 排不齐，主因是容器宽高未固定导致 flex-basis 计算失准；应设明确 width/height 或 aspect-ratio，用 flex: 0 0 calc(33.333% - gap) 控制子项宽度，低版本 iOS 用 nth-child 清 margin 替代 gap，图片需 overflow: hidden 配合 object-fit: cover 防变形。</p>
九宫格图片用 display: flex 排不齐？先看容器宽高是否固定
朋友圈九宫格常见“最后一行塌陷”“图片错位”，多数不是 flex 写错了，而是容器没设明确宽高。微信 WebView、iOS Safari 对 flex-wrap: wrap 的子项收缩行为特别敏感，父容器若靠内容撑开（比如 width: auto），flex-basis 计算就容易失准。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给九宫格容器加
width和height（哪怕用aspect-ratio: 1） - 避免用
max-width: 100%+flex: 1组合，它会让子项在换行时尺寸抖动 - 图片统一用
flex: 0 0 calc(33.333% - 2px)，减去 gap 后的余量比百分比更稳
为什么 gap 在 iOS 14.5 以下不生效？用 margin 替代要防重叠
gap 是 Flexbox 布局最干净的间距方案，但 iOS Safari 直到 14.5 才完整支持。低版本会直接忽略，导致图片紧贴——你以为是样式没加载，其实是浏览器根本不认识这个属性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检测
gap支持：用@supports (gap: 10px)写两套规则 - fallback 方案别直接写
margin-right/bottom，否则最后一列/行会多出空白；改用:nth-child(3n)清除右 margin，:nth-last-child(-n+3)清除底 margin - 慎用
margin: 4px全向设置，它会让第一行三张图之间出现 8px 间隙（左右 margin 合并）
flex-wrap: wrap 遇到 7 张图就崩？关键在 flex-basis 的计算逻辑
九宫格常按 3×3 设计，但用户发图数可能是 1–9 张任意值。7 张图时，前两行各 3 张，第三行只剩 1 张——如果 flex-basis 写死 33.333%，这最后一张会试图占满整行宽度，把布局顶破。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
flex: 0 0 calc((100% - 4px) / 3)（假设 gap=4px），强制每项最大宽度为三分之一减去间隙 - 不要依赖
flex: 1，它会让剩余空间被单张图独占 - 对少于 3 张的情况，可加
justify-content: flex-start避免居中留白过大
图片宽高比不一致时，object-fit: cover 和容器 overflow: hidden 必须配对用
用户上传的图有竖图、横图、头像小图，如果只设 width: 100%; height: 100%，结果就是拉伸变形或留白难看。但光加 object-fit: cover 不够——没有 overflow: hidden，超出部分会溢出容器，破坏网格对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每张图外层包一层
div作为 flex item，设overflow: hidden；内部img设width: 100%; height: 100%; object-fit: cover - 避免用
background-image模拟，它无法响应式缩放，且微信内可能被禁止加载 - 不用
aspect-ratio强制比例，老版安卓 WebView 不支持，会导致高度塌陷
真正麻烦的是动态图数 + 动态宽高比 + 多端兼容——这时候别硬刚 flex 单一方案，该加 JS 算列数就加，CSS 只管视觉对齐。
