实现列表横向滑动需设容器为flex布局并禁换行，再启用overflow-x: auto；关键要防止子项被压缩，可设flex-shrink: 0或flex: none，辅以scroll-behavior: smooth等优化。

让列表横向滑动，核心是两步：容器设为 flex 布局并禁止换行，再用 overflow-x: auto 开启水平滚动。关键细节在于子项不能撑破容器、不能被 flex 自动压缩（除非你想要）。

容器设置 flex + nowrap + 滚动

父容器必须明确启用 flex 布局，并禁止子项换行，同时允许内容溢出时出现水平滚动条：

• display: flex — 启用弹性布局
• flex-wrap: nowrap — 强制所有子项排在一行
• overflow-x: auto — 横向内容超出时显示滚动条（或设为 scroll 强制显示）
• overflow-y: hidden — 避免意外出现垂直滚动条

子项控制宽度与缩放行为

默认情况下，flex 子项可能被压缩（flex-shrink: 1），导致文字挤在一起或图标变形。按需调整：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 加 flex-shrink: 0 — 禁止压缩，保持原始宽度
• 加 min-width: 0（慎用）— 允许文本内折行，避免超长内容撑宽容器
• 若子项是图片或卡片，建议设固定宽高或用 flex: 0 0 auto（等价于 flex: none）

增强体验的小技巧

原生滚动略显生硬，可稍作优化提升可用性：

立即学习“前端免费学习笔记（深入）”；

• 加 scroll-behavior: smooth — 让滚动更平滑（注意兼容性）
• 隐藏滚动条（可选）：::-webkit-scrollbar { display: none; }（仅 WebKit）
• 移动端加 -webkit-overflow-scrolling: touch — 提升 iOS 滚动流畅度（旧版 Safari 需要）
• 给容器加一点 padding 或内边距，避免首尾内容贴边难点击

基本上就这些。不复杂但容易忽略 flex-shrink 和 nowrap 的配合，一漏就变成竖排或自动换行了。