不能只用justify-content: space-between，因为它仅控制间隙分布，不控制步骤项自身宽度或缩放；需结合flex属性显式分配权重（如flex: 1 1 0）、设flex-shrink: 0防压缩，并用gap替代margin确保响应式一致性。
为什么不能只用 justify-content: space-between
因为这个属性只控制步骤项之间的**间隙分布**，不控制每个 .step 自身的宽度或缩放行为。当步骤数从 4 变成 5，或某步文字变长（比如“确认支付信息”），纯靠 space-between 会导致节点挤压、文字换行错位、圆点偏移，小屏下尤其明显。
真正可控的做法是让每个步骤项成为弹性项，并显式分配权重：
-
flex: 1 1 0—— 强制从零宽度开始均分剩余空间，避免内容宽度干扰 -
flex: 2 1 0给关键步骤（如第 3 步）双倍宽度，其余为flex: 1 1 0 - 必须加
flex-shrink: 0或写成flex: 1 0 0，否则小屏下会被压缩到文字撑不开 - 父容器统一设
gap: 1.5rem替代所有手写margin，gap 会自动适配flex-direction主轴方向
连线该用伪元素还是独立 DOM 元素
用 ::before 或 ::after 画线轻量，但容易错位；用独立 .connector 元素更可控，尤其在响应式切换时。
如果坚持伪元素：
立即学习“前端免费学习笔记（深入）”；
- 只对非首项生效：
.step:not(:first-child)::before - 用
position: absolute+top: 50%+transform: translateY(-50%)垂直居中 -
left: -50%+width: 100%才能精准覆盖上一节点中心到当前节点中心 - 别用
border，改用background-color或linear-gradient，避免盒模型干扰
如果要支持竖排或复杂状态（如“已完成”“进行中”），建议 HTML 中显式插入 <div class="connector"></div>，CSS 控制其高度/颜色更直接。
进度条宽度怎么随当前步动态变化
CSS 本身无法读取 JS 的变量值，所以不能只靠纯 CSS 计算进度百分比。必须由 JS 注入状态，再用 CSS 变量驱动。
推荐方式：
- 进度条元素设：
.progress { width: calc((var(--active-step, 1) - 1) / (var(--total-steps, 4) - 1) * 100%); } - JS 更新：
progressEl.style.setProperty('--active-step', 3); progressEl.style.setProperty('--total-steps', 4); - 这样避免内联
style.width污染，也方便加transition: width 0.3s ease - 注意分母不能为 0：当只有 1 步时，
--total-steps至少设为 2，或用 JS 特殊处理
移动端圆点和文字不对齐怎么办
常见现象是文字换两行后，圆点仍按单行高度居中，导致视觉脱节。这不是 bug，而是没约束好对齐基准。
关键控制点：
- 每个
.step设display: flex; flex-direction: column; align-items: center; -
.step-circle容器必须有明确宽高（如width: 40px; height: 40px;）且position: relative - 圆点内数字用
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 文字容器加
text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防撑开 - 竖排时务必重测 WCAG 对比度——
color: #999在手机强光下可能低于 4.5:1 标准
最易被忽略的是：所有圆点尺寸（宽高、字体大小、边框）必须用 em 或 rem 单位，与根字体联动缩放；固定 px 值会让小屏下比例崩坏。
