在手机端开发中，使用Rem结合Flex布局实现九宫格是常见需求，但实际开发时经常会出现格子之间存在缝隙的情况，导致页面展示不符合预期。这种缝隙通常不是代码逻辑错误，而是由几个常见的细节问题共同导致的。
缝隙产生的常见原因
1. Flex容器属性设置不当
如果Flex容器的justify-content属性设置为space-between或者space-around，浏览器会自动在子元素之间分配剩余空间，从而产生缝隙。这是最常见的诱因之一。
2. 子元素宽度计算误差
Rem单位是基于根元素字体大小计算的，当计算子元素宽度时，如果采用除法计算后没有做精度处理，或者根节点字体大小计算存在小数误差，会导致所有子元素总宽度小于容器宽度，剩余空间就会形成缝隙。
3. 盒模型与边框内边距影响
如果子元素设置了border或者padding，同时没有设置box-sizing: border-box，那么元素的实际宽度会超出设定的宽度，导致一行放不下三个子元素，最后一个元素被挤到下一行，视觉上形成行与行之间的缝隙。
对应的解决方法
1. 调整Flex容器属性
将Flex容器的justify-content设置为flex-start，避免浏览器自动分配剩余空间，再通过子元素自身的宽度占满容器，消除缝隙。
2. 精确计算子元素宽度
九宫格子元素宽度建议设置为33.333333%而不是33.33%，减少精度误差，同时根元素字体大小计算时尽量使用整数，避免小数带来的计算偏差。
3. 统一盒模型设置
给所有元素设置box-sizing: border-box，让边框和内边距的计算包含在设定的宽度内，避免元素实际宽度超出预期。
完整示例代码
以下是修复后无缝隙的九宫格实现代码：
/* 重置盒模型 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置根元素字体大小，用于Rem计算，这里以375px设计稿为例 */
html {
font-size: 37.5px; /* 375 / 10 = 37.5 */
}
/* 九宫格容器 */
.grid-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 10rem; /* 375px / 37.5 = 10rem */
margin: 0 auto;
}
/* 九宫格子元素 */
.grid-item {
width: 33.333333%;
height: 3rem;
border: 1px solid #eee;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.4rem;
}
<div class="grid-container">
<div class="grid-item">格子1</div>
<div class="grid-item">格子2</div>
<div class="grid-item">格子3</div>
<div class="grid-item">格子4</div>
<div class="grid-item">格子5</div>
<div class="grid-item">格子6</div>
<div class="grid-item">格子7</div>
<div class="grid-item">格子8</div>
<div class="grid-item">格子9</div>
</div>
注意事项
如果九宫格需要适配不同尺寸的手机，Rem的根字体大小计算需要结合JS动态设置，避免固定值导致大屏手机下缝隙再次出现。同时如果子元素有固定边框，宽度计算时要预留边框的空间，或者继续使用box-sizing: border-box确保宽度计算准确。