使用Flexbox和overflow-x可实现水平滚动卡片，容器设display: flex、overflow-x: auto，子项设min-width和flex-shrink: 0；2. 可隐藏滚动条提升美观；3. 结合响应式与交互优化适配多设备。
在现代网页布局中，水平滚动卡片是一种常见且实用的设计模式，尤其适用于展示图片集、产品列表或文章推荐。通过结合 CSS 的 Flexbox 和 overflow 属性，可以轻松实现流畅的水平滚动效果。
1. 基本结构：Flex 容器与子项
要实现水平滚动，首先需要一个容器使用 Flexbox 布局，并让其子元素（即卡片）在一行内排列。
HTML 结构示例：<div class="scroll-container"> <div class="card">卡片 1</div> <div class="card">卡片 2</div> <div class="card">卡片 3</div> <div class="card">卡片 4</div> <div class="card">卡片 5</div> </div>
CSS 样式设置：
.scroll-container {
display: flex;
gap: 16px;
overflow-x: auto;
padding: 16px;
scroll-behavior: smooth;
}
<p>.card {
min-width: 200px;
height: 120px;
background-color: #e0e0e0;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}关键点说明：
立即学习“前端免费学习笔记（深入）”；
- display: flex：启用 Flex 布局，使子元素横向排列
- overflow-x: auto：当内容超出容器宽度时，显示横向滚动条
- min-width：确保每个卡片有最小宽度，避免被压缩
- flex-shrink: 0：防止卡片在空间不足时被缩小
- scroll-behavior: smooth：实现平滑滚动体验
2. 隐藏滚动条（可选美化）
为了让界面更干净，可以在保持滚动功能的同时隐藏滚动条，尤其是在 WebKit 浏览器中。
.scroll-container::-webkit-scrollbar {
display: none;
}
<p>.scroll-container {
-ms-overflow-style: none; /<em> IE 和 Edge </em>/
scrollbar-width: none; /<em> Firefox </em>/
}这样用户仍可通过鼠标拖动、滚轮或触控滑动来浏览内容，但不会看到突兀的滚动条。
3. 响应式与交互优化
为了让不同设备都有良好体验，可加入响应式设计和手势支持。
- 在小屏幕上减小卡片尺寸：
@media (max-width: 768px)中调整min-width - 添加
padding或伪元素作为“视觉缓冲”，提示用户可继续滚动 - 考虑加入 JS 实现“点击箭头滚动”或“自动滚动”功能
基本上就这些。用 Flexbox 搭配 overflow-x 实现水平滚动卡片简单高效，无需 JavaScript 即可完成核心功能，适合大多数前端项目快速集成。
