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

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

1. 基本结构

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

<div class=”scroll-container”>
  <div class=”item”>Item 1</div>
  <div class=”item”>Item 2</div>
  <div class=”item”>Item 3</div>
  <div class=”item”>Item 4</div>
  <div class=”item”>Item 5</div>
</div>

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工具

48

查看详情

.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 防止项目在容器空间不足时被缩小

4. 可选优化

提升用户体验的小技巧：

• 添加 scrollbar-width: thin 或自定义滚动条样式
• 使用 overscroll-behavior-x: contain 防止页面随滚动一起滑动
• 在移动端启用弹性滚动：-webkit-overflow-scrolling: touch

基本上就这些。Flexbox 搭配 overflow-x 就能轻松实现流畅的水平滚动列表，兼容性好，代码简洁。

以上就是如何通过