实现列表横向滑动需设容器为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），导致文字挤在一起或图标变形。按需调整：
- 加 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 的配合，一漏就变成竖排或自动换行了。
