直接用 justify-content: space-between 做步骤条会错位，因其将首尾项目钉在两端、中间间隙均分；正确方案是 flex: 1 实现等宽项+伪元素画线+每个步骤项设 display: flex 居中图文。
为什么直接用 justify-content: space-between 做步骤条会错位
首尾步骤紧贴容器边缘、中间间距过大，不是 bug，是 space-between 的设计逻辑：它只把第一个和最后一个项目“钉”在主轴两端，其余空间均分给中间间隙。步骤条真正需要的是「首尾留白 + 所有步骤项等宽 + 连接线居中」，不是两端对齐。
用 flex: 1 实现等宽步骤项的关键约束
所有步骤项必须严格满足以下条件，否则 flex: 1 会失效或表现不一致：
- 不设
width、min-width、max-width—— 这些会干扰 flex 剩余空间分配 - 统一使用
box-sizing: border-box - 文字强制单行：
white-space: nowrap，避免换行撑高容器导致高度不一 - 图标/数字统一用
font-size或显式width/height控制尺寸，不依赖默认行高
连接线为什么不能靠 margin 拉，而要用伪元素
用 margin-right 给每个步骤加右空隙再画线，会导致：
- 最后一个步骤也带多余空白和线，视觉上溢出
- 缩放或响应式时，
margin像素值固定，线长失真 - 文字长度不同 → 容器宽度浮动 →
margin无法保证线始终居中于两步之间
正确做法是：步骤容器用 position: relative，每个 .step 后添加 ::after 伪元素，绝对定位在右侧 50%，宽度设为 calc(50% - 16px)（假设步骤宽占 100%/n，减去半边图标+内边距），颜色与步骤线一致。
垂直居中图标和文字失败的常见原因
align-items: center 在步骤容器上无效，往往是因为：
- 步骤项本身不是 Flex 容器，仅靠父级对齐无法控制内部图文基线差异
- SVG 或 inline-block 图标默认按
baseline对齐，而文字有 descender，造成视觉偏移 - 设置了
line-height但没匹配容器高度，或用了vertical-align混搭
最稳解法：给每个 .step 单独加 display: flex; align-items: center; justify-content: center; flex-direction: column;，让图标和文字成为它的子项，再用 margin 或 gap 控制间距 —— 这样对齐完全独立于外部布局流。
真正难的不是写对那几行 CSS，而是所有步骤项必须在尺寸、盒模型、文本行为上保持完全一致；任何一处隐式差异（比如某个步骤多一个空格、少一个 box-sizing）都会让 flex: 1 失效，整条进度看起来歪斜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
