使用 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. 控制子项样式
确保每个项目有固定或最小宽度，避免被压缩：
立即学习“前端免费学习笔记（深入）”；
.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 就能轻松实现流畅的水平滚动列表，兼容性好，代码简洁。
