如何通过css Flexbox实现水平滚动列表-css教程-PHP中文网

如何通过css Flexbox实现水平滚动列表

P粉602998670

发布： 2025-10-29 09:21:02

原创

429人浏览过

使用 CSS Flexbox 可实现水平滚动列表，首先设置容器 display: flex 和 flex-direction: row 使子元素水平排列，再通过 overflow-x: auto 允许横向滚动，配合 min-width 与 flex-shrink: 0 防止子项压缩，最后添加 gap 间距和滚动优化提升体验。

如何通过css flexbox实现水平滚动列表

使用 CSS Flexbox 实现水平滚动列表，关键在于将容器设置为弹性布局，并禁止换行，再通过溢出隐藏和横向滚动来实现。下面一步步说明具体实现方法。

1. 基本结构

先构建一个简单的 HTML 结构：一个外层容器包裹多个列表项。

2. 设置 Flex 容器

让容器使用 Flexbox 并横向排列子元素：

.scroll-container {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
} 说明：

display: flex 启用弹性布局
flex-direction: row 子元素水平排列（默认值，可省略）
overflow-x: auto 当内容超出容器宽度时显示横向滚动条
gap 设置项目之间的间距

3. 控制子项样式

确保每个项目有固定或最小宽度，避免被压缩：

立即学习“前端免费学习笔记（深入）”；

酷表ChatExcel

北大团队开发的通过聊天来操作Excel表格的AI工具

查看详情

.item {
  min-width: 200px;
  height: 100px;
  background-color: #007bff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0; /* 防止在空间不足时被压缩 */ } 重点：

min-width 确保项目不会太窄
flex-shrink: 0 防止项目在容器空间不足时被缩小