九宫格抽奖界面应使用flex-basis+gap（或margin降级）实现等宽等高布局，禁用width避免缩放偏差；需设box-sizing:border-box、伪元素或aspect-ratio维持1:1比例；每个.item须min-height:44px并加touch-action:manipulation保障点击可靠。
直接说结论：九宫格抽奖界面用 Flex 实现，关键不是“怎么排成 3×3”，而是让每个 .item 在各种屏幕下尺寸精确、不塌陷、不换错行、点击响应可靠——这需要放弃 width，改用 flex-basis + gap（或降级 margin），并手动扣减间隙值。
为什么不能直接写 width: 33.333%
因为 Flex 容器中，width 只是初始参考，会被 flex-shrink 拉扯（尤其内容含图片/文字时），iOS Safari 下更明显；而抽奖界面要求每个格子视觉上严格等宽、等高、间距一致，稍有偏差就会显得“歪”或“挤”。flex-basis 才是 Flex 主轴上的真实基准尺寸，配合 flex: 0 0 … 能锁死不缩放。
-
flex: 0 0 calc(33.333% - 2px)是常用写法（假设间隙为4px，左右各占一半） - 若用
gap: 4px，则直接写flex: 0 0 calc(33.333% - 4px)——但注意：gap不参与子项自身尺寸计算，只在它们之间插入空隙，所以扣的是整个间隙值 - 别忘了设
box-sizing: border-box，否则 padding/border 会额外撑大
gap 兼容性差？必须 fallback 到 margin
iOS Safari 在 11.2 以下完全不支持 gap，此时所有 .item 会紧贴左上角堆成一坨，而非 3×3。不能指望用户升级系统，得写降级逻辑：
- 用
@supports (gap: 4px)包住现代写法，里面放心用gap: 4px - fallback 里用
margin-right: 4px; margin-bottom: 4px，再加两条清除规则：.item:nth-child(3n) { margin-right: 0; }和.item:nth-last-child(-n+3) { margin-bottom: 0; } - 父容器加
overflow: hidden，防止因 margin 外扩导致横向滚动条
高度怎么保持 1:1 且不塌陷？
抽奖格子通常是正方形图标入口，但 Flex 容器默认不维持宽高比，height: 33.333% 无效（父容器无明确高度）。正确做法是用伪元素触发 aspect-ratio 效果：
- 给每个
.item设position: relative，再加::before伪元素：content: ""; display: block; padding-top: 100%; - 真正的内容层用
position: absolute; top: 0; left: 0; width: 100%; height: 100%覆盖 - 或者更现代的写法：
aspect-ratio: 1（iOS 16.4+ 支持，老版本仍需伪元素兜底）
点击区域小、抽奖按钮点不中？这不是布局问题，是交互缺陷
很多团队做完九宫格就以为结束了，结果真机测试发现：点图标没反应、连点两次才触发、甚至被识别为页面滑动——根本原因是 iOS Safari 对小于 44px × 44px 的可点区域有延迟和误判机制。
- 每个
.item必须设min-height: 44px（哪怕图标只有 24px） - 加
touch-action: manipulation，明确告诉浏览器“这是操作目标，别等双击或缩放” - 如果内部是
或，确保它们是display: block，且未被父级overflow: hidden剪掉边缘
最常被忽略的一点：旧版 iOS fallback 用 margin 时，:nth-last-child(-n+3) 补底部 margin 容易漏掉最后一行的 bottom 间距，导致整体矮一截——这个必须真机连 Safari 开发者工具调试确认，别靠猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
