flex:1等分失效是因内容反向劫持：长文本、图标尺寸或padding差异迫使浏览器优先满足最小内容宽，再分配剩余空间；须统一box-sizing:border-box、flex:1、min-width:0、white-space:nowrap及容器级连线与data-status驱动状态。
直接给 .step 设 width: 25% 或靠 flex: 1 却不加 min-width: 0，移动端一出现长文本就崩——这不是 Flex 不行，是内容反向劫持了布局分配逻辑。
flex: 1 等分失效的真实原因和修复点
浏览器执行 flex 分配时，会先满足每个子项的「最小内容尺寸」（min-content），再把剩余空间按 flex-grow 分。只要任一 .step 里有未截断的长文本、图标尺寸不一致、或 padding 差异，它就会撑开整行，导致其他节点被压缩甚至换行。
- 必须统一所有
.step的box-sizing: border-box - 显式声明
flex: 1; min-width: 0; width: auto; - 文字强制单行：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 禁用
margin控制节点间距（它会挤占 flex 可分配空间），改用容器级padding留白
连线不能由子项伪元素拼接
用每个 .step::before 拉线，看似简单，实则埋雷：首项左边多线、末项右边多线、响应式缩放后连线错位、JS 动态增删步骤时伪元素状态不同步。
- 正确做法是把横线抽到容器级：
.steps::before绘制贯穿全宽的基准线 -
.steps设position: relative，.step设position: relative仅用于圆点定位 - 用
.step自身背景色遮盖掉不需要的线段（比如data-status="todo"的节点用白色背景盖住左侧线） - 避免用
:first-child/:last-child控制伪元素显隐——状态驱动比结构位置更可靠
data-status 是唯一可维护的状态接口
写 class="step step-active step-done step-error" 是自找麻烦：JS 更新漏一项，CSS 权重打架，样式散落在各处，三态交叠时行为不可预测。
- 只允许三个值：
data-status="todo"、data-status="active"、data-status="done" - 所有视觉反馈基于属性选择器，例如：
[data-status="done"]::before控制圆点背景，[data-status="active"]::after插入动态图标 - 状态变更只需一次 DOM 属性赋值：
stepEl.setAttribute('data-status', 'done')，无 class 清理负担 - 动画过渡要加在
.step::before上，而不是整个.step元素，避免文字重排触发 layout
最易被忽略的是：连线与节点的层叠顺序必须严格受控——.steps::before 的 z-index: 1，.step::before（圆点）设 z-index: 2，.step::after（图标）设 z-index: 3。少一个层级，移动端轻触时就可能点中线而非节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
