使用 Flexbox 实现水平滚动列表需设置容器 display: flex、flex-wrap: nowrap 和 overflow-x: auto，子项设置 flex: 0 0 auto 并固定宽度，配合 gap 间距与 scroll-behavior: smooth 可提升体验，通过伪元素可自定义滚动条样式，适用于多端无需 JavaScript。
要使用 CSS Flexbox 制作一个水平滚动列表，关键在于将容器设置为 flex 布局，并禁止换行，然后允许内容在横向溢出并可滚动。
1. 基本结构
HTML 结构通常是一个外层容器包裹多个项目项：
Item 1
Item 2
Item 3
Item 4
2. 核心 CSS 设置
通过以下样式实现水平滚动效果：
.scroll-container {display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-behavior: smooth;
gap: 10px;
padding: 10px;
scrollbar-width: thin;
}
.item {
flex: 0 0 auto;
width: 200px;
height: 150px;
background-color: #f0f0f0;
border-radius: 8px;
padding: 10px;
text-align: center;
}
3. 关键属性说明
display: flex：启用弹性布局
flex-wrap: nowrap：防止子元素换行，强制排在一行
overflow-x: auto：当内容超出容器宽度时显示横向滚动条
flex: 0 0 auto：设置子项不伸缩，保持固定宽度，且不自动拉伸
scroll-behavior: smooth：让滚动更顺滑（可选）
gap：设置项目之间的间距，比 margin 更干净
4. 可选优化
去除浏览器默认滚动条样式，提升视觉体验：
立即学习“前端免费学习笔记（深入）”；
.scroll-container::-webkit-scrollbar {height: 6px;
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 3px;
}
基本上就这些。只要容器是 flex 且不换行，子项固定宽度不拉伸，再开启横向滚动，就能实现流畅的水平滚动列表。移动端和桌面端都适用，无需 JavaScript。
