flex: 1 未真正等宽的根本原因是 min-width、width、长文本、图标尺寸不一致或 padding 差异导致 flex 退化为按内容撑开；需统一 box-sizing、white-space、禁用 margin、用容器 padding 替代 space-between，并为 .step 添加 flex + align-items:center + column 布局，连线改用容器伪元素绘制，状态交由 js 控制。
直接用 flex: 1 就能平分布局，但多数人卡在“看起来平分了，连线却歪、圆点偏移、文字换行撑高”——问题不在 flex 本身，而在没切断干扰项。
为什么 flex: 1 没让步骤条真正等宽？
根本原因是：只要任一 .step 里有 min-width、width、长文本、图标尺寸不一致或 padding 差异，flex: 1 就会退化为“按内容撑开”，不是“按剩余空间均分”。浏览器会优先满足内容最小尺寸，再分配剩余空间。
- 检查所有步骤项是否都写了
flex: 1，且没混用width: 100px或min-width: 80px - 确保文字不换行：
white-space: nowrap，否则高度突变会拉高整行 - 统一
box-sizing: border-box，避免 padding 影响 flex 基准计算 - 禁用
margin控制间距——它会挤占 flex 分配空间，改用容器padding留白
justify-content: space-between 为什么让首尾贴边、中间空太大？
这不是 bug，是它的设计本意：space-between 把第一个和最后一个项目钉死在容器起点和终点，中间空隙均分。步骤条通常需要的是“首尾留白 + 中间等距”，不是“首尾贴边”。
- 放弃
space-between，改用display: flex+ 容器左右padding（如padding: 0 24px） - 每个
.step设flex: 1，不设 margin - 若必须保留首尾对齐感，可用额外 wrapper 包住全部步骤项，再手动控制首尾位置
圆点/数字上下偏移、连线对不齐的真正原因
伪元素（如 ::before）默认是 inline 盒子，在 flex 容器中 vertical-align 失效；而 align-items: center 对齐的是项目整体边界框，不是内部图标的基线。
- 给每个
.step加display: flex; align-items: center; justify-content: center; flex-direction: column - 圆点用固定
width/height/border-radius实现，别依赖字体图标或 SVG 默认尺寸 - 连接线不要每个步骤画一段，改用容器级伪元素一次性绘制基线：
.steps::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: 2px; background: #ddd; } - 避免在
.step内混用inline和block元素；统一用 flex 子项布局
最易被忽略的一点：步骤条不是纯视觉组件，它常需配合 JS 动态加 .active 类。一旦用兄弟选择器（如 .step.active ~ .step::before）控制连线颜色，就可能因 DOM 结构变化或渲染时序出错——建议把状态逻辑交给 JS 控制类名，CSS 只管样式映射。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
