小屏步骤条需设min-width+flex-wrap换行或column垂直布局，连接线应独立元素并防压缩，active状态需同步圆点文字，ie11须降级table或滚动方案。
步骤条在小屏上被挤成一行或换行错乱
Flex 布局默认不自动换行，flex-wrap: nowrap 是初始值。小屏下如果步骤项太多（比如 5 个 .step），又没设最小宽度或弹性约束，就会溢出容器或强行压缩文字导致重叠。
解决的关键不是“让它换行”，而是**控制单步的最小可读宽度 + 允许 flex 容器换行 + 用媒体查询降级为垂直排列**：
- 给每个
.step设置min-width: 120px（确保文字不被压扁） - 父容器加
flex-wrap: wrap，但仅在屏幕 ≤768px 时启用 - 更稳妥的做法：≤768px 时直接切换为
flex-direction: column，并移除justify-content的水平对齐逻辑 - 避免用
flex: 1给所有步骤项——它会在小屏下强制等分剩余空间，反而让文字被截断
步骤连接线在 Flex 下无法对齐或断裂
连接线（通常是 ::after 伪元素）依赖于步骤项的定位和尺寸。Flex 下若未显式设置 position: relative 或未处理 flex-shrink: 0，连接线容易随内容收缩、偏移甚至消失。
典型错误是这样写：
.step::after {
content: '';
width: 100%;
height: 2px;
background: #ccc;
}
问题在于：width: 100% 在 flex item 中指的是该 item 的宽度，而非到下一个 item 的距离。正确做法是把连接线抽出来，用绝对定位或单独的 .line 元素，且必须配合 flex-shrink: 0 防止被压缩：
- 每个
.step设flex-shrink: 0 - 连接线用独立元素（如
<div class="line"></div>），放在步骤之间，设flex: 1并加min-width: 24px防止塌缩 - 移动端垂直布局时，把
.line改为height: 24px、margin: 0 auto实现竖直居中线
active 状态切换时，圆点和文字不同步高亮
常见实现是靠 JS 切换 .step.active 类，但样式里如果只改了 .step.active .dot 而漏了 .step.active .label，视觉就会割裂。更隐蔽的问题是：Flex 的 align-items 和子元素的 vertical-align 混用，导致圆点和文字基线不一致。
实操建议：
- 统一用
display: flex; align-items: center包裹圆点和文字，避免inline-block+vertical-align - 高亮状态统一作用在
.step上，再用后代选择器同步控制：.step.active .dot、.step.active .label、.step.active .line - 不要依赖 JS 动态插入 class 到多个分散节点，而是维护一个
currentStep变量，一次性重绘整个步骤条的 class 分布
IE11 下 Flex 步骤条完全错位或不显示
IE11 对 Flex 的支持有硬伤：不支持 flex-wrap: wrap 的某些组合、flex: 1 行为异常、伪元素在 flex item 中定位失效。如果你的项目仍需兼容 IE11，不能只靠 Autoprefixer。
能落地的方案只有两个方向：
- 对 IE11 单独提供降级 CSS：用
display: table模拟步骤条，每步table-cell，连接线用背景图或 border - 或彻底放弃 IE11 的响应式——在
@supports not (display: flex)里 fallback 到固定宽度 + overflow-x: auto 的横向滚动步骤条 - 务必检查
flex-basis是否用了auto：IE11 对flex: 0 0 auto解析不稳定，换成具体值如flex: 0 0 140px
真正麻烦的不是写两套样式，而是测试时容易漏掉「IE11 下 active 步骤超出视口却无滚动提示」这种交互细节——它不会报错，但用户卡在第一步动不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
