真正可靠的做法是用 display: flex + justify-content: space-between 配合明确的容器宽度控制；每个 .step 设 flex: 0 0 auto，避免拉伸变形；连线推荐使用显式 .connector 元素或容器级伪元素精确定位。
Flexbox 布局步进器时，为什么 step 项间距不均？
直接给 .step 设置 flex: 1 或 width: 25% 在不同屏幕下容易错位，尤其当步进器总数量动态变化（比如 3 步 vs 5 步）时，固定分栏会撑开或压缩文字。真正可靠的做法是用 display: flex + justify-content: space-between 配合明确的容器宽度控制。
实操建议：
- 外层容器设
display: flex和justify-content: space-between，不依赖子项 flex 比例 - 每个
.step用flex: 0 0 auto，避免被 Flexbox 拉伸变形 - 容器加
max-width（如max-width: 600px）防止在大屏上过度拉宽连线 - 移动端可改用
flex-direction: column+align-items: center，此时连线改用::before垂直居中伪元素
用 ::before 画连线，为什么总是偏移或断开？
伪元素默认相对于父元素定位，但步进器的连线需要连接两个相邻 step 的中心点。如果只对 .step 加 ::before，它只能画出单侧线段，且易受字体大小、内边距影响而偏移。
实操建议：
- 把连线逻辑抽离到独立的
.connector元素，插在每对 step 之间（HTML 中显式写入），比纯伪元素更可控 - 若坚持用伪元素，推荐在
.steps-container上用::after绘制整体横线，再用position: absolute+transform: translateX(-50%)定位每个 step 的圆点 - 连线高度统一用
height: 2px，背景色用background-color而非border，避免盒模型干扰 - 务必设
box-sizing: border-box，否则 padding 会让width: 100%计算失准
响应式断点下，如何让连线自动隐藏或转为垂直？
小屏（如 max-width: 480px）时水平连线会挤压文字、降低可读性，此时应切换为垂直布局：step 垂直堆叠，连线改为从上一个 step 底部连到下一个 step 顶部。
实操建议：
- 用媒体查询控制
.steps-container的flex-direction：桌面端row，移动端column - 原水平连线（
.connector）在移动端设display: none；改用每个.step:not(:last-child)::after画向下箭头或竖线 - 竖线伪元素需设
content: ""、position: absolute、top: 100%、left: 50%、transform: translateX(-50%) - 注意
z-index层级：确保连线在 step 圆点之下，但又不被后续内容遮盖
active 状态联动时，CSS 变量怎么避免重复写死颜色？
步进器常需根据当前 active 步骤高亮对应圆点和已过连线。若每个状态都写死 background-color: #007bff，后期换主题色就得全局搜索替换。
实操建议：
- 定义 CSS 自定义属性，如
--step-active-color: #007bff和--step-inactive-color: #ccc，挂载在:root或组件容器上 - 用
[data-step="2"].active .step-circle这类属性选择器精准控制，而非依赖 class 层级嵌套过深 - 已激活的连线可用
.connector.active，配合background-color: var(--step-active-color)，无需 JS 操作样式字符串 - 慎用
transition: all；只对background-color和transform做过渡，避免重排重绘性能问题
实际最难的不是画线，而是让“连线长度”在 flex 分布后仍能精确对齐每个 step 的视觉中心——这要求所有 step 的 padding、font-size、line-height 在各断点下保持比例一致，稍有偏差，连线就会看起来“没接上”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
