实现横向滚动卡片需设容器固定宽、flex-wrap: nowrap及子项flex: 0 0 auto；避免white-space: nowrap干扰，移动端加transform: translateZ(0)和-webkit-overflow-scrolling: touch提升触控流畅性。
横向滚动卡片在现代网页中很常见，但直接用
+
容易翻车——比如滚动条不出现、卡片被截断、移动端卡顿或无法滑动。核心问题不是“能不能做”，而是“怎么让滚动行为稳定、可交互、符合直觉”。
为什么
有时不生效
最常踩的坑是容器没设固定宽度或
干扰了 flex 布局。Flex 容器默认会压缩子项（
），导致卡片被强行压扁，失去横向铺开的基础。
确保父容器有明确的
或
（比如
或
）
给卡片容器加
和
给每个卡片设置
（禁止缩放 + 不换行 + 宽度由内容决定）
避免在卡片内部用
，它会干扰文本折行并撑宽卡片
移动端滑动不灵敏或卡顿怎么办
iOS Safari 和部分安卓 WebView 对
的触控支持较弱，尤其在没有开启硬件加速时容易卡顿或响应延迟。
强制启用 GPU 加速：给滚动容器加
或
添加
（仅 iOS，已逐步废弃但仍有兼容价值）
禁用默认橡皮筋效果可能更可控：
避免在滚动区域里放大量图片或未优化的 CSS 动画
如何让卡片间距均匀且不破坏滚动
用
最干净，但 IE 不支持；用
容易在首尾多出空白，影响滚动起始/结束位置。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
推荐方案：用
（现代浏览器全支持），配合
给容器内边距，视觉上等效于首尾无额外 margin
兼容旧版：用
给每个卡片加间隔，再用
清除末项
绝对不要用
—— 它会让最后一张卡片贴右，滚动时出现“空滑”感
真正难的不是写几行 CSS，而是理解滚动容器的尺寸边界、子项的 flex 行为、以及不同平台对
的实现差异。哪怕只是加个
，也得先确认卡片宽度严格一致，否则 snap 会错位。
display: flexoverflow-x: autooverflow-x: autowhite-space: nowrapflex-shrink: 1widthmax-widthwidth: 100%width: 300pxdisplay: flexflex-wrap: nowrapflex: 0 0 autowhite-space: nowrapoverflow-x: autotransform: translateZ(0)will-change: scroll-position-webkit-overflow-scrolling: touchoverscroll-behavior-x: containgapmargingap: 12pxpadding-inline: 12pxmargin-right:last-child { margin-right: 0 }justify-content: space-betweenoverflowscroll-snap-type: x mandatory