<p>九宫格需设flex-wrap: wrap且flex-direction: row，用flex: 0 0 calc(33.333% - 4px)锁等宽，gap不兼容旧iOS需@supports降级为margin并清除末尾间距，格子min-height: 44px+touch-action: manipulation确保可点。</p>
flex-wrap: wrap 是九宫格能显示全 9 个的前提
不加 flex-wrap: wrap，Flex 容器默认 nowrap，所有子项强行挤在一行。iPhone 小屏下大概率只显示前 3 个，后面 6 个被裁掉或缩成一条线——这不是 bug，是 Flex 的默认行为。
必须显式写上 flex-wrap: wrap，且建议同时声明 flex-direction: row（虽是默认值，但防被全局样式重置）。
- 容器高度需有约束：要么设固定
height，要么用aspect-ratio: 1或伪元素维持比例，否则高度塌陷，看不出“格” -
justify-content推荐用space-between或space-around；别用center，会导致左右留白不均，尤其在非整除宽度的屏幕下 - 父容器加
overflow: hidden，防止 margin 外扩引发横向滚动条
别用 width: 33.333%，改用 flex-basis + flex-shrink: 0
width: 33.333% 在 Flex 容器里只是参考值，内容一有图片或文字，flex-shrink 就会把它拉窄，iOS Safari 下尤其明显。抽奖/图标类九宫格要求视觉严格等宽，必须锁死尺寸。
正确写法是：flex: 0 0 calc(33.333% - 4px)（假设间隙为 4px），其中：
立即学习“前端免费学习笔记（深入）”；
-
0→flex-grow: 0：不放大 -
0→flex-shrink: 0：不缩小 -
calc(33.333% - 4px)→flex-basis：主轴基准尺寸，扣掉整个 gap 值（不是一半）
同时确保 box-sizing: border-box，否则 padding/border 会让格子实际变大。
gap 不兼容 iOS 11.2 以下？必须降级到 margin
iOS Safari 在 11.2 之前完全不解析 gap，降级后所有格子会堆在左上角，变成一坨——这不是你代码写错了，是浏览器不认。
用 @supports (gap: 4px) 包住现代写法，fallback 里手动算 margin：
- 每个格子加
margin-right: 4px; margin-bottom: 4px - 清除每行末尾：
.item:nth-child(3n) { margin-right: 0; } - 清除最后一行底部：
.item:nth-last-child(-n+3) { margin-bottom: 0; }（注意不是n+7，那是固定 9 项的硬编码，响应式下失效）
真机调试时，打开 Safari 开发者工具看 computed styles，确认 fallback 是否生效——这个细节漏掉，底部就会缺一条缝。
格子点不中？min-height 和 touch-action 才是关键
布局画得再准，点不上等于白搭。iOS Safari 对可点击区域有最小面积要求：小于 44×44px 会延迟响应或误判为滑动。
- 每个格子必须设
min-height: 44px（哪怕内容只有 16px 图标） - 加
touch-action: manipulation，明确告诉浏览器“这是按钮，别等双击、别缩放” - 如果格子里套了
<a></a>或<button></button>，确保它们display: block，且没被父级overflow: hidden剪掉
最常被忽略的是：gap 降级后 margin 计算容易漏掉最后一行的 bottom margin，导致点击热区偏上——这得靠真机测，模拟器看不出。
