CSS flex实现水平滚动列表教程

本文手把手教你仅用纯 CSS Flexbox 实现响应式、跨平台的水平滚动列表——无需一行 JavaScript，通过设置容器为 `display: flex`、`flex-wrap: nowrap` 和 `overflow-x: auto`，配合子项 `flex: 0 0 auto` 固定尺寸与 `gap` 间距，再辅以 `scroll-behavior: smooth` 和自定义滚动条样式，即可轻松打造丝滑、美观、移动端友好的横向滚动体验，简洁高效又极具实用性。

要使用 CSS Flexbox 制作一个水平滚动列表，关键在于将容器设置为 flex 布局，并禁止换行，然后允许内容在横向溢出并可滚动。

1. 基本结构

HTML 结构通常是一个外层容器包裹多个项目项：

2. 核心 CSS 设置

通过以下样式实现水平滚动效果：

3. 关键属性说明

display: flex：启用弹性布局
flex-wrap: nowrap：防止子元素换行，强制排在一行
overflow-x: auto：当内容超出容器宽度时显示横向滚动条
flex: 0 0 auto：设置子项不伸缩，保持固定宽度，且不自动拉伸
scroll-behavior: smooth：让滚动更顺滑（可选）
gap：设置项目之间的间距，比 margin 更干净

4. 可选优化

去除浏览器默认滚动条样式，提升视觉体验：

基本上就这些。只要容器是 flex 且不换行，子项固定宽度不拉伸，再开启横向滚动，就能实现流畅的水平滚动列表。移动端和桌面端都适用，无需 JavaScript。

今天关于《CSS flex实现水平滚动列表教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！