<p>九宫格用flex布局必须设flex-wrap: wrap才能换行，否则9个子项挤在一行；容器需固定宽高，子项用flex: 0 0 calc(33.333% - 2px)并配margin: 1px实现等宽与间隙；中奖效果优先用outline或box-shadow而非z-index；慎用vh/vw，推荐calc()配合媒体查询。</p>
九宫格用 display: flex 必须设为 flex-wrap: wrap
纯 flex-direction: row 默认不换行，9个子项会强行挤在一行，超出容器也不折行。必须显式加 flex-wrap: wrap，否则永远出不来三行三列。
常见错误是只写 display: flex 就以为完事了，结果页面上只显示前3–4个格子，后面全被裁掉或溢出到右侧看不见。
-
flex-wrap: wrap是九宫格能“折成三行”的前提 - 容器宽度要足够容纳 3 个子项（含间距），否则可能变成 2+3+4 这种错乱行数
- 推荐给容器设固定宽高，比如
width: 300px; height: 300px;，避免响应式干扰布局判断
每个格子用 flex: 0 0 calc(33.333% - 2px) 控制等宽 + 间距
不能直接写 width: 33.333% —— 那样 3 个加起来刚好 100%，但没给 margin 留空间，会导致第三列被挤换行。正确做法是用 flex-basis 扣除间距再均分。
假设格子间横向/纵向间隔都是 2px，3 列就有 2 个间隙 → 总间隙 4px，所以每列最多占 (100% - 4px) / 3。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
flex: 0 0 calc(33.333% - 2px);（2px是单侧间隙，两格之间共用，所以减一次即可） - 同时配
margin: 1px（上下左右都留 1px，两格相邻就合成 2px 间隙） - 不要用
justify-content: space-between搞九宫格，它只对主轴起作用，且无法保证行列对齐
抽奖高亮效果别用 z-index 叠加，改用 outline 或 box-shadow
九宫格常需动态标出“当前中奖格”，如果用 position: relative + z-index 插入一个覆盖层，容易破坏 flex 流式布局，尤其在 Safari 下可能触发重排异常。
更稳的方式是直接操作中奖格子自身的边框表现：
- 用
outline: 3px solid #ff6b35;：不占布局空间，不影响其他格子位置 - 或
box-shadow: 0 0 0 3px #ff6b35;：视觉更柔和，支持圆角延续 - 避免
border，因为它会改变元素尺寸，导致整行宽度超限、触发意外换行
移动端适配时慎用 vh/vw 做格子尺寸
用 width: 30vw 看似方便，但在 iOS Safari 中，地址栏收放会动态改变 vh 值，造成格子瞬间缩放、抽奖逻辑错位。PC 端也存在类似问题（如浏览器缩放）。
- 优先用固定像素值（如
width: 80px）或rem配合根字体缩放 - 若必须响应式，用
minmax(80px, 1fr)配合grid更稳 —— 但既然你坚持用 flex，那就老实用calc()+ 媒体查询分段控制 - 测试真机时重点看滚动后是否出现“最后一行只剩两个格子”的情况，大概率是
flex-wrap容器高度没撑够，或子项margin-bottom没算进总高
实际最易忽略的是：flex 容器的 align-content 默认是 stretch，但如果你给容器设了固定高度且子项总高不够，中间会留白——抽奖面板通常需要居中填满，此时得补一句 align-content: flex-start 或直接删掉固定高，靠内容撑开。
