使用 Flexbox 实现水平滚动列表需设置容器 display: flex、flex-wrap: nowrap 和 overflow-x: auto，子项设置 flex: 0 0 auto 并固定宽度，配合 gap 间距与 scroll-behavior: smooth 可提升体验，通过伪元素可自定义滚动条样式，适用于多端无需 JavaScript。
要使用 CSS Flexbox 制作一个水平滚动列表，关键在于将容器设置为 flex 布局，并禁止换行，然后允许内容在横向溢出并可滚动。
1. 基本结构
HTML 结构通常是一个外层容器包裹多个项目项：
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 更干净
稿定抠图
AI自动消除图片背景
76 查看详情
4. 可选优化
去除浏览器默认滚动条样式，提升视觉体验：
立即学习“前端免费学习笔记（深入）”；
.scroll-container::-webkit-scrollbar {
height: 6px;
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 3px;
}
基本上就这些。只要容器是 flex 且不换行，子项固定宽度不拉伸，再开启横向滚动，就能实现流畅的水平滚动列表。移动端和桌面端都适用，无需 JavaScript。
以上就是在css中如何用flex制作水平滚动列表的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1027852.html
微信扫一扫 
支付宝扫一扫 
