如何在HTML/CSS中实现移动端方形盒子横向滚动？

嘿，我来帮你解决这个移动端横向滚动的问题！你现在的桌面端布局没问题，但移动端因为flex-wrap: wrap会让盒子换行，要实现目标截图里的横向滚动效果，只需要针对移动端调整几个CSS属性就行，具体步骤如下：

核心调整思路 #

原来的.squares容器用了flex-wrap: wrap，小屏幕会自动换行；现在要让移动端的盒子保持一行，超出部分横向滚动，所以需要：

• 禁止容器换行
• 开启横向溢出滚动
• 微调子元素样式，避免挤压变形

具体代码修改 #

你需要在样式文件里添加这段媒体查询（断点可以根据你的需求调整，这里用768px作为移动端的分界）：

/* 移动端适配：768px以下屏幕生效 */
@media (max-width: 768px) {
  .squares {
    flex-wrap: nowrap; /* 强制盒子保持在一行，不换行 */
    overflow-x: auto; /* 内容超出时显示横向滚动条 */
    padding-bottom: 1rem; /* 给滚动条留空间，避免挡住盒子底部 */
    /* 可选：美化滚动条，让它更美观 */
    scrollbar-width: thin;
  }

  /* 针对webkit浏览器（比如Chrome、Safari）的滚动条样式 */
  .squares::-webkit-scrollbar {
    height: 6px;
  }

  .squares::-webkit-scrollbar-thumb {
    background-color: #919396;
    border-radius: 3px;
  }

  .squares .square {
    width: 28%; /* 调整移动端盒子宽度，确保一行能放几个且不挤，可按需修改 */
    flex-shrink: 0; /* 禁止盒子被压缩变形，保持原有尺寸 */
    margin-right: 1rem; /* 给盒子之间加间距，替代原来的space-between */
  }

  /* 去掉最后一个盒子的右边距，避免尾部空出多余空间 */
  .squares .square:last-child {
    margin-right: 0;
  }
}

为什么这么改？ #

• flex-wrap: nowrap：让所有盒子强制在一行排列，不会因为屏幕窄就换行
• overflow-x: auto：当盒子总宽度超过容器宽度时，自动出现横向滚动条，用户可以左右滑动查看
• flex-shrink: 0：确保每个方形盒子不会被挤扁，保持你设置的宽高比例
• 用margin-right代替justify-content: space-between：在横向滚动容器里，space-between会让首尾盒子贴紧容器边缘，用margin能更灵活控制盒子间的间距，滚动体验更好

小提示 #

• 你可以根据自己的设计需求，修改媒体查询的断点（比如改成600px）或者盒子的宽度值
• 如果想要滚动更丝滑，可以给.squares加上scroll-behavior: smooth属性
• 记得在真实手机或者浏览器的移动端模拟器里测试，确保滚动流畅、样式正常

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