唯一稳定方案是display: flex+justify-content: space-between配合flex: 0 0 auto、max-width控制及显式.connector元素；flex: 1因无最小宽度保护，在小屏下压缩文字、错位图标、断裂连线，无法适应动态步数变化。
直接用 display: flex + justify-content: space-between 是唯一能稳定应对步数变化（3 步、5 步、动态增减）的布局方案；任何依赖 flex: 1 或固定 width: 25% 的写法，在小屏或步数不均时必然错位、文字折行甚至撑破容器。
为什么 flex: 1 在步进器里会失效？
它强制等分容器宽度，但没设最小宽度保护。4 个 flex: 1 的 .step 在 320px 屏上会被压到不足 60px，文字自动换行，图标偏移，连线断裂——这不是响应式，是崩溃式压缩。
- 每个
.step必须设flex: 0 0 auto，禁止拉伸变形 - 外层容器加
max-width: 600px，防止大屏下连线过长、文字被“拉稀” - 移动端断点（
@media (max-width: 480px)）改用flex-direction: column+align-items: center，此时连线需改用::before垂直居中伪元素，而非水平横线
连线总对不齐？别用 step::after
.step::after 是相对于单个 step 定位的，但连线要连接两个 step 的中心点。字体大小、padding、line-height 一变，偏移就跟着跑，调试成本远高于重写结构。
- 推荐显式插入
<div class="connector"></div>在每对 step 之间，HTML 可控，CSS 定位精准 - 若坚持伪元素，把横线逻辑移到
.steps-container::after，用position: absolute+transform: translateX(-50%)定位圆点，连线用height: 2px+background-color（不用border，避免盒模型干扰） - 务必全局设
box-sizing: border-box，否则width: 100%在有padding时计算失准
进度宽度怎么随步数动态算？纯 CSS 不行
CSS 无法读取当前第几步、总共有几步，所以像 “走到第 3 步就显示 60%” 这种逻辑，必须靠 JS 注入变量，CSS 只负责渲染。
- JS 中调用
element.style.setProperty('--active-step', '3')和--total-steps: '5' - CSS 写
.progress { width: calc((var(--active-step) / var(--total-steps)) * 100%) } - IE 不支持 CSS 变量，得降级为 JS 直接设
style.width = '60%' - 别在进度条内部套
width: 100%——它只占父容器宽，不是按步数比例伸缩
真正难的不是画线或动效，而是让每一步的宽度、间距、连线长度在 3 步和 7 步之间无缝切换——这要求你放弃“均分”思维，转而信任 space-between 的弹性分配能力，并主动控制最大宽度与最小内容空间。稍一松手，小屏上就会出现文字挤成一团、箭头撕裂、连线悬空的现场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
