Flex容器中子元素行间出现水平间隙的问题排查求助

以下是几种常见的原因和对应的解决办法：

• 空白字符引发的水平间隙：HTML代码里子元素之间的换行、空格会被浏览器解析成空白字符，在flex布局下会产生元素间的水平间隙。解决办法：给父容器#root设置font-size: 0;，如果子元素需要显示文字，再单独给.grid_div设置合适的font-size；也可以把所有子元素的HTML代码写在同一行，去掉换行和空格。

• align-content默认值导致的行间距：当开启flex-wrap: wrap后，align-content默认值是stretch，如果父容器的高度大于所有行的总高度，浏览器会把多余空间分配到各行之间，形成垂直间隙。解决办法：给#root添加align-content: flex-start;（也可以选flex-end或center，根据布局需求调整），让行顶对齐，消除额外的行间距。

• 子元素的margin/padding干扰：检查.grid_div是否设置了不必要的margin（比如margin-right、margin-bottom）或padding，导致元素尺寸超出预期，产生间隙。解决办法：如果不需要这些间距，直接删除对应的margin/padding；如果是盒模型问题，给所有元素统一设置box-sizing: border-box;，让宽高计算包含边框和内边距。

• 父容器的padding影响：确认#root是否设置了padding，这会导致内部元素和容器边缘产生间隙。解决办法：去掉#root的padding，或者根据需求调整数值。

示例修改后的CSS代码 #

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  font-size: 0; /* 消除空白字符间隙 */
  align-content: flex-start; /* 移除行间距 */
  padding: 0;
}

.grid_div {
  width: 100px;
  height: 100px;
  flex: 0 0 auto; /* 固定尺寸，不拉伸不收缩 */
  font-size: 16px; /* 恢复子元素字体大小 */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

内容的提问来源于stack exchange，提问作者Jacob Winter