Flex是移动端H5九宫格最稳妥方案，需同时满足flex-wrap、calc精确宽度和box-sizing；用padding替代margin控间隙；后端数据不足时前端补空项至3的倍数并隐藏内容。
移动端 H5 实现九宫格，Flex 是最稳妥、兼容性最好的选择——尤其在微信内置浏览器、iOS Safari 旧版、安卓 WebView 等混合环境中，比 Grid 更可靠。
核心三要素：flex-wrap + 精确宽度 + box-sizing
缺一不可，漏掉任一个都可能导致换行错乱、最后一行只显示 1–2 个格子：
-
父容器必须显式声明
display: flex; flex-wrap: wrap;（不能依赖默认值，某些全局样式会重置） -
子项宽度用
flex: 0 0 calc(33.333% - 4px)（假设横向间隙总和为 4px），而不是width: 33.333%或flex: 1—— 后两者会被内容撑开或压缩 -
每个子项加
box-sizing: border-box;，确保 padding/border 不额外增加宽度，避免总宽超 100% 触发异常换行
间隙处理：用 padding 代替 margin 更稳
margin 在部分微信 Android 和 iOS 旧版中易引发横向滚动条或点击热区偏移；推荐统一用 padding 控制间距：
- 父容器设
padding: 4px;（预留四周边距） - 子项设
padding: 4px;（内部留白），视觉间隙自然形成 - 这样既避开 margin 清除的复杂逻辑，又防止 overflow 滚动，还兼容所有 H5 容器
数据对齐：补空项防断裂
后端返回 7 条或 8 条分类很常见。若不处理，最后一行只剩 1–2 个格子，UI 断裂：
- 前端主动补空：比如 Vue 中用 computed 补足至 9 项（或 3 的倍数），补的是空对象
{ icon: '', text: '' } - 渲染时用
v-if="item.icon"隐藏空格子，但保留占位宽度（不删 DOM），保证布局稳定 - 切忌用
justify-content: space-between试图“拉平”，小屏下左右留白不均，反而更难看
点击与视觉细节：别让体验掉链子
九宫格是高频操作区域，这些细节直接影响用户是否愿意点第二下：
- 每个格子设
min-height: 44px;（iOS 最小触控面积），哪怕图标只有 24px - 文字用
text-overflow: ellipsis; white-space: nowrap;防截断，字号 ≤24rpx - 图标用
<image>标签，mode="aspectFill"+ 固定宽高（如 64rpx × 64rpx） - H5 端注意 rpx 缩放一致性，App 端确认 manifest.json 中已启用 rpx 支持
