最稳妥方案是 display: flex 横向排列图片；因绝对定位需手动维护 left 值且响应式难适配，float 已淘汰且易塌陷错位；flex 天然支持单行横排、不换行，配合 overflow: hidden、flex-wrap: nowrap、flex: 0 0 100% 及 translatex 切换可实现稳定轮播。
用 display: flex 横向排列图片最稳妥，比绝对定位、float 或 inline-block 更可控、更少出错。
为什么不用绝对定位或 float？
绝对定位需手动维护每张图的 left 值，索引一错全乱；响应式时宽度变化，left 得重算。而 float 在现代布局中已淘汰：间隙难控、换行错位、父容器高度塌陷风险高。flex 天然支持“单行横排 + 不换行”，flex: 0 0 100% 就能确保每张图占满视口宽度，缩放、切换、动画都干净利落。
flex 布局必须配的关键 CSS
漏任何一条都会导致滚动错位或无法对齐：
-
overflow: hidden必须加在外层容器（如.carousel），否则滑出去的图会露出来 -
display: flex和flex-wrap: nowrap要写在图片容器（如.carousel-inner）上 - 每个图片项设
flex: 0 0 100%（不伸缩、不压缩、占满宽度） - 切换时用
transform: translateX(-currentIndex * 100%)，别用margin-left——后者触发重排，卡顿明显
移动端滑动要额外注意什么？
纯 CSS flex + translateX 只解决“跳切”，但手指拖拽需要 JS 配合 touchstart/touchmove/touchend：
-
touchmove中只计算偏移并调e.preventDefault()，禁止页面上下滚动 -
touchend才判断是否切换：若Math.abs(offset) > slideWidth * 0.3，才执行位移 - Safari 上偶发
transform不重绘，加transform: translateZ(0)或will-change: transform强制硬件加速
真正容易被忽略的是：所有轮播结构都依赖外层容器有明确宽高和 overflow: hidden。没设这两项，再漂亮的 flex 代码也白搭——图会铺满整页，根本看不出“轮播”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
