flexbox步骤条不能只靠justify-content: space-between，因其仅控制主轴间隙分布，不控制节点尺寸或权重；动态步数或关键步骤需用flex属性显式分配宽度。
Flexbox步骤条为什么不能只靠justify-content: space-between
因为space-between只控制主轴上项目之间的**间隙分布**，不控制每个步骤节点自身的尺寸或相对权重。当步骤数动态变化（比如从3步变成5步），或者需要某些步骤占更宽区域（如“确认订单”比“填写地址”语义更重要），纯靠space-between会导致节点挤压、文字换行、对齐错位，尤其在小屏下极易溢出容器。
真正可控的方式是让每个.step成为弹性项，并用flex属性显式分配权重。
-
flex: 1让所有步骤均分剩余空间（适合等宽步骤） -
flex: 2给关键步骤双倍宽度（如第4步设为flex: 2，其余为flex: 1） - 必须配合
flex-shrink: 0防止小屏下被压缩到文字撑不开
步骤条进度条（.progress）如何随步骤数自适应宽度
进度条不是固定百分比，而是根据当前激活步骤索引和总步数动态计算——但CSS本身无法读取JS变量，所以不能只靠纯CSS实现“走到第3步就显示60%”。必须用JS更新style.width或CSS自定义属性。
推荐做法：用CSS变量传入当前步序，再用calc()算宽度：
.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);
这样避免内联width样式污染，也方便后续用CSS动画过渡。
移动端小屏下步骤文字换行/重叠的修复要点
步骤文字默认是居中写在圆圈里的，小屏时圆圈缩得太小，文字会挤成两行甚至重叠。这不是Flexbox的问题，而是布局层级没理清。
- 把文字单独包一层
<span class="step-label">步骤 1</span>，脱离圆圈的flex约束 - 用
position: absolute+top: 100%把标签移到圆圈下方，避免撑高容器 - 给
.step加min-width: 44px（符合移动端最小点击热区标准） - 媒体查询中改
flex-direction: column并设gap: 16px，让步骤纵向堆叠而非横向挤压
为什么align-items: center有时会让步骤不对齐
因为.progress-bar用了::before伪元素画底色线，而align-items: center是对齐所有子元素（包括.progress和多个.step）的交叉轴中心。但.progress高度是4px，.step是30px，它们的“中心”不在同一水平线上，视觉上就偏了。
解决方法只有两个：
- 把
.progress设为align-self: center，强制它和.step对齐 - 或者更干净的做法：去掉
align-items，改用padding-top: 13px（即(30px - 4px)/2）手动对齐，避免依赖交叉轴计算
实际项目里，后者更可控——Flexbox的对齐逻辑在嵌套或字体渲染差异下容易失准，手动留白反而稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
