解决Flexbox布局中首个盒子前的多余间隙问题

我帮你分析了代码里的问题，主要有两个关键点导致这个间隙，咱们一步步来修复：

1. 先修复语法错误导致的单位计算异常 #

你在html选择器里写了：

font-size: 62, 5%;

这里的逗号是错误的，应该用小数点.，也就是62.5%。这个错误会让浏览器忽略这个font-size声明，转而使用默认的16px作为基准，导致你所有用rem的尺寸计算都偏离预期，间接引发布局间隙。

修正后：

html { font-size: 62.5%; box-sizing: border-box; }

2. 调整日期块的宽度计算逻辑 #

你当前给日期块设置的宽度是：

width: calc(100% /7 - 1rem);

这个计算没有正确考虑flex gap的数量——7个日期块之间只会有6个1rem的间隙，而不是7个。错误的计算会让总宽度加上gap后小于容器宽度，或者导致换行，最终在首个盒子前出现多余空间。

正确的计算应该是先从容器总宽度里减去6个gap的宽度，再平均分给7个日期块：

.main-content__day {
  /* 保留你原有的其他属性 */
  width: calc((100% - 6 * 1rem) / 7);
}

如果你想更贴合Flexbox的特性，也可以用flex属性替代手动设置width，这样布局会更健壮：

.main-content__day {
  aspect-ratio: 1/1;
  flex: 1 0 calc((100% - 6 * 1rem) /7);
  /* 移除原有的width属性 */
  /* 其他属性不变 */
}

额外检查 #

如果你觉得首个盒子前的间隙还是存在，看看section.main-content的padding-left:1rem是不是你不需要的——如果这个padding是误加的，直接移除它就行；如果是故意保留的日历侧边留白，那只要宽度计算正确，这个padding就不会变成“多余间隙”。

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