justify-content: space-between 无法解决进度条节点间距问题，因其只分配间隙而不约束节点宽度，小屏下易致文字挤叠、图标错位；须配合 flex: 0 0 auto、min-width: 44px 及显式 connector 元素方可稳健适配。
直接用 justify-content: space-between 不能解决进度条节点间距问题——它只分配间隙，不管节点自身尺寸，小屏下文字挤叠、图标错位是常态。
为什么 justify-content: space-between 在步进器里容易失效
它只控制主轴上项目之间的空隙分布，不约束每个 .step 的宽度。当屏幕变窄，4个等宽的 .step 会被强行压缩，文字换行、圆圈变形、连线偏移全跟着发生。尤其步数动态变化（比如从3步切到5步）时，固定分栏逻辑立刻崩坏。
- 纯靠
space-between+flex: 1，节点会按内容撑开又收缩，无法保证最小可读性 - 设
width: 25%同样不可靠：步数一变就得改 CSS，维护成本高 - 没配
flex-shrink: 0的话，小屏下浏览器会优先压缩节点而非换行，导致文字重叠
每个 .step 必须用 flex: 0 0 auto
这是防止拉伸变形的关键。它让每个步骤项按自身内容宽度渲染，不参与剩余空间瓜分，也不被压缩。
-
flex: 0 0 auto等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto，明确禁用伸缩行为 - 配合外层
display: flex和justify-content: space-between，才能真正实现“间距自适应、节点不挤压” - 务必加
min-width: 44px（符合移动端最小点击热区），否则小屏下圆圈缩成点，图标文字糊在一起
连线不能只靠伪元素 ::before
伪元素默认相对父容器定位，但两个相邻 .step 的中心点距离会随字体、内边距、缩放而漂移，导致连线断开或偏斜。
- 推荐在 HTML 中显式插入
<div class="connector"></div>，插在每对.step之间 -
.connector设width: 100%; height: 2px; background: #ccc，再用position: absolute居中定位更稳 - 移动端切
flex-direction: column时，把.connector改成height: 100%; width: 2px，避免重写逻辑
.progress 宽度必须由 JS 控制
CSS 无法读取当前步数或总步数，所谓“走到第3步显示60%”本质是 JS 注入值，CSS 只负责渲染。
- JS 设置：
progressEl.style.setProperty('--active-step', '3')和progressEl.style.setProperty('--total-steps', '5') - CSS 计算：
.progress { width: calc((var(--active-step) - 1) / (var(--total-steps) - 1) * 100%) } - IE 不支持 CSS 变量，需降级为直接设
style.width = '60%'，别用width: 100%套内部容器——那只是占满父宽，不是按步数比例伸缩
真正麻烦的不是写几行 Flex 代码，而是每个 .step 的尺寸边界、连线的定位锚点、以及进度值的跨层传递——这三处稍有疏忽，小屏下就会出现文字折行、连线断裂、进度卡死。它们不在 Flexbox 文档首页，但在真实项目里天天露脸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
