直接设flex: 1的步骤项在小屏下会挤成一条线，因其默认等分容器宽度且无最小宽度限制，导致文字折行、图标错位；应改用flex: 0 0 auto配合justify-content: space-between及max-width控制。
为什么直接设 flex: 1 的步骤项在小屏下会挤成一条线？
因为 flex: 1 默认等分容器宽度，但没限制最小宽度。当屏幕变窄，4个 flex: 1 的步骤会被强行压缩，文字折行、图标错位，甚至内容撑破容器。
真正可控的做法是：每个步骤用 flex: 0 0 auto，外层容器用 justify-content: space-between 分配间距，再配合 max-width 控制整体宽度上限。
- 给步骤容器（如
.steps-container）设display: flex和justify-content: space-between - 每个步骤（
.step）设flex: 0 0 auto，禁止拉伸变形 - 加
max-width: 600px防止大屏下连线过长、文字被拉稀 - 移动端断点（如
max-width: 480px）改用flex-direction: column+align-items: center
进度条（.progress）宽度为什么不能只靠 CSS 算出来？
CSS 无法读取当前步骤索引或总步数，所以像“走到第3步就显示60%”这种逻辑，纯 CSS 没法动态响应。你看到的“自适应进度”，本质是 JS 更新了某个值，CSS 只负责渲染。
推荐用 CSS 自定义属性传值，再用 calc() 计算宽度：
- 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 - 别用
width: 100%套在进度条内部——它只占父容器宽，不是按步数比例伸缩
连线（connector）为什么总对不齐或断开？
伪元素（如 .step::after）默认相对于单个步骤定位，但连线需要连接两个步骤的中心点。字体大小、内边距、行高稍有变化，left: 100% 就会偏移。
更稳的方式是把连线抽成独立 DOM 元素，或统一用容器级伪元素绘制主横线：
- HTML 中显式插入
<div class="connector"></div>在每对步骤之间 - 或让
.steps-container::after绘制整条横线，再用position: absolute+transform: translateX(-50%)定位每个步骤圆点 -
.connector必须设height: 2px和background-color（别用border，盒模型易干扰） - 务必加
box-sizing: border-box，否则padding会让width: 100%失准
箭头形步骤条在缩放后撕裂，怎么避免？
用 border 或 transform: scale() 做箭头，像素值不会随缩放重算，斜角立刻错位。正确解法是每个步骤自己“长出箭头”：
- 当前步骤右边缘用
clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%) - 下一个步骤左边缘用
clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%) - 所有步骤必须统一高度 +
box-sizing: border-box，否则calc()偏移失效 - 响应式宽度别写死
width: 200px，改用 Grid 的minmax(120px, 1fr)配合 Flex 的flex-basis
最常被忽略的是：clip-path 的像素值（比如 20px）在高 DPI 屏或缩放页面下不会自动适配，需要搭配 rem 或媒体查询微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
