Flex布局不支持滑动吸附，需用touch事件+transform模拟或scroll-snap-type实现；后者要求现代浏览器支持、卡片定宽且注意兼容性；手动实现需基于速度与位置判断吸附逻辑，并用overscroll-behavior防止页面晃动。
Flex布局本身不支持滑动吸附，得靠touch事件+transform模拟
Flex只是排版工具，display: flex再怎么设flex-wrap或overflow-x: auto，都没法自动吸附到卡片边界。真要“Swiper效果”，必须手动监听touchstart/touchmove/touchend，计算偏移量，再用transform: translateX()驱动容器位移，并在松手时判断是否靠近某个临界点、自动补帧到位。
用scroll-snap-type是更轻量的替代方案（但兼容性有坑）
现代浏览器支持原生滚动吸附，无需JS：
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.card {
flex: 0 0 100%;
scroll-snap-align: start;
}
注意三点：
-
scroll-snap-type在iOS Safari 14+、Chrome 69+才稳定，老版本会直接失效 - 必须给
.card设固定宽度（如flex: 0 0 100%），不能靠内容撑开 - 安卓WebView和部分微信内置浏览器对
scroll-behavior: smooth支持差，松手后可能卡顿或跳变
手动实现吸附逻辑时，关键不是滑动距离，而是松手瞬间的速度和位置
只看最终偏移量容易误判。真实Swiper类库（如Swiper.js）会记录touchmove过程中的时间戳和坐标，算出瞬时速度，再结合当前偏移决定是回弹还是吸附到下一个卡片。
简化版可这样处理：
- 记录
touchstart的clientX和时间戳 - 每次
touchmove更新最新clientX和时间戳，存为lastX/lastTime -
touchend时，用(currentX - lastX) / (now - lastTime)估算速度 - 若速度绝对值 > 0.3px/ms，且位移已过半，则直接跳到下一个卡片；否则吸附到最近卡片
Flex容器加overscroll-behavior: contain防页面整体滚动
移动端手指快速拖拽时，如果卡片滑到边界还继续拉，整个页面可能跟着上下晃动（尤其iOS Safari）。在Flex容器上加这行能截断默认行为：
.carousel {
overscroll-behavior: contain;
}
这个属性在Chrome 63+/Safari 16.4+/Firefox 93+可用，但旧版iOS Safari（event.preventDefault()在touchmove里拦截——不过要小心别影响内部滚动区域（比如卡片里有长文本需要竖向滚动）。
真正难的不是写几行transform，是处理手指快划、慢拖、中途停顿、边界回弹这些状态切换。多数人掉坑里，是因为只做了“松手吸附”，没管“划一半突然停住该回弹还是吸住”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
