flex-basis: 33.33% 不行，因其仅设初始尺寸，不锁定最终宽度；遇 gap、border、padding 或容器宽非3整倍数时，flex-shrink会压缩子项致错位；应改用 calc() 扣减均摊间隙。
flex-basis: 33.33% 为什么不行
直接写 flex-basis: 33.33% 在 Flex 容器里大概率导致最后一行错位或换行异常，尤其在 iOS Safari 旧版本或 Chrome 某些缩放比例下。根本原因不是百分比计算不准，而是 flex-basis 只管“初始尺寸”，不锁死最终渲染宽度——当容器有 gap、子项有 border 或 padding，或者父容器宽度不是 3 的整数倍时，浏览器会按 flex-shrink 规则压缩子项，33.33% 就失守了。
正确写法：用 calc() 减去间隙
必须把间隙（gap 或 margin）从单个格子的尺寸里提前扣掉，才能保证三列严丝合缝：
- 若用
gap: 4px（推荐），子项写flex: 0 0 calc(33.333% - 2.666px)—— 因为三列只有两个横向 gap，均摊到每个格子是4px × 2 / 3 ≈ 2.666px - 若降级用
margin（兼容 iOS flex: 0 0 calc(33.333% - 4px)，再配合:nth-child(3n)清除右 margin - 容器必须设
flex-wrap: wrap，否则所有格子强行挤在一行，iPhone 上只显示前 3 个
别忽略容器高度和 aspect-ratio
只设 width 不设 height 或 aspect-ratio，九宫格会塌成一条线——Flex 子项的 height 默认由内容撑开，不是自动均分容器高度。
- 稳妥做法：
container { aspect-ratio: 1; }，再让子项height: calc(33.333% - 2.666px) - 或固定宽高：
height: 300px，子项flex-basis: calc(33.333% - 2.666px)+height: calc(33.333% - 2.666px) - 避免只靠
flex-grow: 1均分高度，它依赖交叉轴对齐行为，容易受align-content干扰
iOS 旧版 gap 失效时的 margin fallback 细节
@supports 不支持 gap 时，用 margin 替代看似简单，但实际漏掉两处：
- 最后一行的
margin-bottom：必须用:nth-last-child(-n+3)单独清除，否则底部多出一格间隙 - 父容器要加
overflow: hidden，否则横向 margin 可能触发滚动条（尤其在微信内置浏览器里） -
box-sizing: border-box必须显式设在子项上，否则border会让总宽超限
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
