flex-basis: 33.33% 无法可靠实现九宫格，因其仅设初始宽度且不阻止压缩；须用 calc() 扣减 gap 或 margin，并配合 flex-wrap: wrap、box-sizing: border-box、aspect-ratio 等确保严丝合缝。
直接写 flex-basis: 33.33% 实现九宫格，大概率失败——不是百分比算错，而是它根本锁不住宽度。
为什么 flex-basis: 33.33% 在九宫格里不顶用
它只设“初始主轴尺寸”，不阻止 flex-shrink 压缩。一旦容器有 gap、子项带 border 或 padding、父容器宽度不是 3 的整数倍，浏览器就会按 flex 规则把格子拉窄，最后一行错位或换行异常。iOS Safari 旧版、Chrome 某些缩放比例下尤其明显。
常见错误现象包括：
- 第三列突然掉到第二行开头
- 九宫格在 iPhone 上只显示前 3 个（
flex-wrap: nowrap被默认启用） - 格子宽高不一致，尤其内容含图片时
正确写法：用 calc() 扣减均摊间隙
必须把横向间隙提前从单个格子的基准尺寸里扣掉，才能严丝合缝。关键看你怎么处理间隙：
- 用
gap: 4px（推荐）→ 子项写flex: 0 0 calc(33.333% - 2.666px)（因为两个 gap 均摊到三个格子：4px × 2 ÷ 3 ≈ 2.666px） - 降级用
margin→ 子项写flex: 0 0 calc(33.333% - 4px)，再加:nth-child(3n) { margin-right: 0; }和:nth-last-child(-n+3) { margin-bottom: 0; } - 容器必须设
flex-wrap: wrap，否则所有格子强行挤在一行 - 子项必须显式设
box-sizing: border-box，否则border或padding会让总宽超限
别忘了高度控制：没有约束，九宫格会塌成一条线
Flex 子项的 height 默认由内容撑开，不是自动均分容器高度。所以：
- 要么给容器设固定
height（如height: 300px），子项再配height: calc(33.333% - 2.666px) - 要么用
aspect-ratio: 1（推荐），再让子项height: calc(33.333% - 2.666px) - 避免只靠
flex-grow: 1均分高度——它依赖交叉轴对齐行为，容易受align-content干扰
iOS 旧版 gap 失效时的 margin fallback 细节
光写 margin 不够，漏掉这两点就白忙：
- 最后一行底部多出一格间隙 → 必须用
:nth-last-child(-n+3) { margin-bottom: 0; }单独清除 - 横向
margin可能触发滚动条（尤其微信内置浏览器）→ 父容器加overflow: hidden
最易被忽略的其实是 box-sizing: border-box 和 flex-wrap: wrap ——它们不报错，但一漏就全盘失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
