如何在HTML/CSS中实现移动端行内方块的横向滚动？

我来帮你搞定这个移动端的布局需求～你目前的桌面端方块布局已经做得很出色了，用这段CSS实现了方块在一行内水平两端对齐、自动换行的效果：

.squares { display: flex; justify-content: space-between; align-items:center; padding: 1rem; position: relative; width: 70%; max-width: 1080px; margin: auto; flex-wrap: wrap; }

现在要在移动端实现方块横向滚动的效果，只需要借助媒体查询针对小屏幕设备调整flex属性即可，具体修改如下：

具体实现代码 #

在你现有的CSS基础上，添加这段媒体查询代码：

/* 针对移动端设备（这里以768px为断点，可根据需求调整） */
@media (max-width: 768px) {
  .squares {
    flex-wrap: nowrap; /* 强制方块在一行排列，不换行 */
    justify-content: flex-start; /* 方块从左侧开始排列 */
    overflow-x: auto; /* 开启横向滚动 */
    width: 100%; /* 让容器占满移动端屏幕宽度 */
    padding: 1rem 0; /* 调整内边距，避免滚动时内容贴边 */
    
    /* 可选：优化滚动条外观（提升体验） */
    scrollbar-width: thin; /* Firefox下调整滚动条粗细 */
  }

  /* Chrome、Safari等webkit内核浏览器的滚动条样式 */
  .squares::-webkit-scrollbar {
    height: 6px;
  }

  .squares::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
}

原理说明 #

• flex-wrap: nowrap：取消自动换行，让所有方块保持在同一行
• overflow-x: auto：当容器内容宽度超出屏幕时，自动显示横向滚动条
• width: 100%：让容器适配移动端屏幕宽度，避免留白导致滚动区域过小
• 滚动条优化代码是可选的，能让滚动体验更精致，不需要的话可以删掉

这样修改后，桌面端会保持你原来的优秀布局，移动端就会自动切换成横向滚动的效果啦～

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