如何在HTML/CSS中消除桌面端水平滚动，保留移动端滚动

我帮你梳理下需要修改的地方，轻松搞定桌面端的水平滚动问题：

• 移除overflow-x:auto属性：这个属性是导致桌面端出现水平滚动条的核心原因——当容器内的方块总宽度超过容器宽度时，它会自动显示横向滚动条。我们只需要在桌面视图下去掉它，移动端的滚动效果可以通过媒体查询单独保留。
• 添加flex-wrap: wrap：默认情况下flex容器不会自动换行，当方块总宽度超出容器时就会撑出水平滚动。加上这个属性后，方块会在容器空间不足时自动换行，完全贴合容器宽度，不会超出。
• 可选：用gap优化换行后的布局：如果希望每行方块的间距更均匀，避免最后一行方块靠左的视觉问题，可以添加gap: 1rem来设置方块之间的固定间距，同时可以把justify-content: space-between换成justify-content: center，让排版更整齐。

修改后的完整CSS代码如下：

.squares {
  display: flex;
  justify-content: space-between; /* 或者换成 justify-content: center; 配合 gap 使用 */
  align-items:center;
  padding: 1rem;
  position: relative;
  width: 70%;
  max-width: 1080px;
  /* 移除 overflow-x:auto */
  flex-wrap: wrap; /* 添加自动换行 */
  gap: 1rem; /* 可选：添加方块间距，优化布局 */
  margin: auto;
}

/* 媒体查询保留移动端的水平滚动效果 */
@media (max-width: 768px) {
  .squares {
    flex-wrap: nowrap; /* 移动端不换行 */
    overflow-x: auto; /* 恢复横向滚动 */
  }
}

这样修改后，桌面端的方块会自动换行，完全贴合容器宽度，不会出现水平滚动；移动端则保持原来的横向滚动效果，符合你的需求。

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