应设 align-items: center 避免拉伸导致连接线偏移；移动端用媒体查询切垂直布局并隐藏连接线；间距用 gap 而非 margin；safari 中改用 opacity 动画替代 transform 以防止闪动。
为什么 flex 容器里连接线总对不齐步骤点？
因为默认 align-items: stretch 会让所有子项（包括步骤点和连接线）拉满高度，而连接线通常用 ::after 或伪元素绘制，其定位基准依赖于父项的尺寸和 position 上下文。一旦步骤项高度不一致（比如文字换行、图标大小不同），连接线就会偏移或断裂。
实操建议：
- 给步骤容器（
.stepper）显式设置align-items: center，避免子项被拉伸 - 连接线不要依赖
height或绝对定位的硬编码值，改用flex子项 +min-width控制 - 每个“步骤单元”应是独立
flex项目，结构类似：<div class="step"> <div class="step-dot"></div> <div class="step-line"></div> </div>
怎么让连接线在移动端自动隐藏或变短？
响应式连接线的关键不是“缩放”，而是“按需渲染”。水平步进器在小屏上容易溢出，直接隐藏连接线比强行压缩更可靠；若需保留，应切换为垂直布局而非压缩长度。
实操建议：
- 桌面端用
flex-direction: row，连接线用flex: 1占位；移动端用@media (max-width: 768px)切换为flex-direction: column，并设.step-line { display: none; } - 若必须保留水平连接线，改用
width: max(2rem, 10%);配合min-width: 1.5rem，避免在窄屏下塌缩成点 - 禁用
white-space: nowrap在步骤文字上，否则文字撑开容器导致连接线错位
gap 和 margin 哪个更适合控制步骤间距？
用 gap。它作用于 flex 容器内部项目之间，不触发外边距合并，也不影响 :first-child/:last-child 的连接线逻辑；而 margin 在响应式场景下极易因媒体查询覆盖不全导致连接线错位或重叠。
实操建议：
- 主容器设
display: flex; gap: 1.5rem;，所有步骤项自动等距，连接线只需填满gap空隙 - 若需首尾无连接线，给第一个
.step的.step-line设display: none，而不是靠margin-left: 0调整 - 避免在
.step-line上写margin: 0 0.5rem—— 它会干扰gap计算，且在 flex 主轴方向上无意义
为什么 Safari 下连接线偶尔闪动或渲染异常？
Safari 对 flex + 伪元素 + transform 的组合渲染有延迟，尤其当连接线用 ::after 绘制且含 scaleX() 动画时。常见现象是步骤激活瞬间连接线跳动或未渲染。
实操建议：
- 连接线不用
transform: scaleX(0)控制显隐，改用opacity: 0 / 1+transition: opacity 0.2s - 强制硬件加速：给
.step-line加will-change: opacity;（仅在需要动画时） - 避免在
::after中用top: 50%; transform: translateY(-50%)垂直居中 —— 改为align-self: center配合height固定值更稳定
flex 布局的约束方式和媒体查询中对结构的重构粒度。最容易被忽略的是：把连接线当作视觉装饰来处理，而不是布局要素 —— 它不该参与 flex 的尺寸分配，只该响应步骤项的位置变化。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
