flex: 1均分步骤条需清除干扰项：所有.step必须无width/min-width/max-width、box-sizing: border-box、white-space: nowrap，图标尺寸固定，连线由容器伪元素统一绘制，图文居中用子级flex布局，首尾留白靠padding而非space-between。
直接用 flex: 1 就能让步骤条均分，但多数人卡在“看着等宽，实际连线歪、圆点偏、文字一换行就撑高”——问题不在 Flex，而在没清理干扰项。
所有步骤项必须严格满足 flex: 1 的前提条件
只要任一 .step 里存在 width、min-width、长文本、图标尺寸不一致或 padding 差异，flex: 1 就会退化为“按内容撑开”，而不是“按剩余空间均分”。浏览器优先满足最小尺寸，再分配剩余空间。
- 每个 .step 都写
flex: 1，且不设width、min-width、max-width - 统一加
box-sizing: border-box，避免内边距影响 flex 基准计算 - 文字强制单行：
white-space: nowrap，防止换行拉高容器 - 图标/数字用固定
width/height/font-size控制，别依赖默认行高或 SVG 自适应
连线不能靠 margin 拉，得用容器级伪元素
给每个 .step 加 margin-right 再画线，会导致最后一项多出空白和线、缩放时失真、文字长度不同导致连线偏移。真正稳定的方案是让连线脱离单个步骤，由容器统一控制。
- 步骤容器设
position: relative - 用
.steps::before绘制贯穿整行的基线：top: 50%+transform: translateY(-50%)+ 固定高度背景色 - 若需分段着色（如已完成步骤前的线变色），改用 JS 控制
.step.active ~ .step::before或更稳妥的 data-status 属性驱动
图文居中要靠内部 flex，不是靠 align-items 硬对齐
align-items: center 对齐的是整个 .step 元素的边界框，而数字、圆点、文字的基线往往不一致，导致视觉偏移。inline 元素在 flex 容器里 vertical-align 失效，必须用子级 flex 布局重新约束。
立即学习“前端免费学习笔记（深入）”；
- 每个 .step 加
display: flex+flex-direction: column+justify-content: center+align-items: center - 圆点用
width/height/border-radius显式定义，不依赖字体图标尺寸 - 避免在 .step 里混用 inline 和 block 元素；统一用 flex 子项排布图标与文字
首尾留白 ≠ space-between，padding 才是可控解法
justify-content: space-between 是把首尾两项钉死在容器两端，中间空隙均分——这适合导航栏，但不适合步骤条。步骤条需要的是“左右留白 + 所有步骤等宽 + 连线居中”。
- 容器加
padding: 0 24px（或你想要的值），制造首尾留白 - 去掉
justify-content: space-between，只保留display: flex - 每个 .step 保持
flex: 1，不设margin—— 间距由 padding 和伪元素连线共同定义 - 如需响应式适配，可配合
min-width: 0防止长文本撑开 flex 项
