加了 overflow-x: auto 仍不能横向滑动，主因是容器未明确宽度约束、子项被 flex-shrink 压缩或 white-space: nowrap 导致换行；可靠写法需同时满足 display: flex、flex-wrap: nowrap、明确宽度、子项 flex: 0 0 auto、overflow-y: hidden 及 -webkit-overflow-scrolling: touch。
为什么加了 overflow-x: auto 还是不能横向滑动
不是属性没生效，而是容器根本“不知道自己该溢出”。最常踩的坑有三个：
• 父容器没设宽度（比如只写 width: 100%，但上层是 display: contents 或未定宽的 flex 项）
• 子卡片被 flex-shrink: 1 默认压缩，挤成一行内，内容压根没超出
• 错误地在子项里加了 white-space: nowrap，导致文本撑高、卡片高度不一，间接触发换行
display: flex + overflow-x: auto 的最小可靠写法
这不是堆属性，而是每步堵住一个泄漏点：
• 容器必须设 display: flex 和 flex-wrap: nowrap（强制子项死扛一行）
• 容器要有明确宽度约束：比如 max-width: 600px，或 width: 100% 且父级已设像素宽
• 每个卡片加 flex: 0 0 auto（禁止缩放、不增长、宽度由内容决定）
• 必须加 overflow-y: hidden，否则 macOS/iOS 可能出现双轴滚动条
• 移动端务必加 -webkit-overflow-scrolling: touch，否则 Safari 滑不动或卡顿
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
怎么隐藏滚动条但保留滑动能力
删掉 overflow-x: auto 就彻底没滚动了，隐藏的是视觉组件，不是功能本身：
• WebKit 内核（Chrome/Safari/Edge）用 ::-webkit-scrollbar { display: none; }
• Firefox 不支持该伪元素，但触屏下仍可拖拽，无需额外处理
• 别用 margin-bottom: -16px 物理遮挡滚动条——影响可访问性，且在高缩放比下可能露馅
scroll-snap-type 吸附失效的硬性条件
语法没错，但两个前提缺一不可：
• 容器必须用 overflow-x: scroll（不是 auto），否则 Safari 和部分 Android 浏览器不触发吸附
• 子项必须严格左对齐基准一致：用 flex: 0 0 auto，别用 margin-right 做间隔（会导致 snap 错位），改用 gap
• 若需每次只跳一格，加 scroll-snap-stop: always；iOS 14.5 以下不支持，会退化为普通滚动
flex-shrink 行为，它们不报错，但会让整个滚动逻辑静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
