步骤条宽度不一致的根本原因是flex:1受内容、min-width等干扰，应统一设flex:1且禁用宽高约束，用flex布局内部居中，容器加padding控制留白，伪元素画线，避免缩放失真。
步骤条元素宽度不一致导致间距错乱
用 flex: 1 做步骤条时，如果每个步骤项（如 .step）设置了固定宽或 min-width，又没统一约束，Flex 会按内容撑开，造成相邻步骤之间空白不均。常见现象是：文字多的步骤挤占空间，文字少的被压缩，整体看起来“歪了”。
根本原因是 flex: 1 默认等比分配剩余空间，但前提是所有项目没额外尺寸干扰。一旦某个 .step 内有长文本、图标或 padding 差异，就会打破平衡。
- 确保所有步骤项使用
flex: 1，且不设width、min-width或max-width - 用
white-space: nowrap防止文字换行撑高容器 - 给步骤项统一设置
text-align: center和box-sizing: border-box - 若需图标/数字居中，避免用
margin-left类绝对定位方式，改用display: flex; justify-content: center内部对齐
justify-content: space-between 无法让步骤条两端对齐
很多人试过 justify-content: space-between，发现首尾两个步骤紧贴容器边缘，中间空隙过大——这不是 bug，是它本意：把第一个和最后一个项目分别钉在起点和终点，其余均分中间空隙。步骤条通常需要的是“首尾留白 + 中间等距”，不是“首尾贴边”。
正确做法是放弃 space-between，改用 display: flex + padding 控制外边距，再靠 flex: 1 均分内部间隙。
立即学习“前端免费学习笔记（深入）”；
- 给步骤条容器加
padding: 0 24px（左右留白） - 每个
.step设flex: 1，不设margin - 用伪元素或额外
div画连接线，不要依赖项目 margin 拉出间隙 - 若必须用
space-between，得额外包一层内容器，把首尾步骤放进去并手动控制位置
align-items: center 失效，步骤图标上下偏移
步骤条常含数字、圆点、对勾等小图标，当它们和文字混排时，align-items: center 看似生效，实际图标可能略高或略低。这是因为 align-items 对齐的是项目的交叉轴“边界框”，而图标（尤其是 inline 元素或 SVG）的基线（baseline）和文字不一致。
最稳的方式不是调 align-items，而是让每个步骤项自己成为 Flex 容器，内部垂直居中。
- 给
.step加display: flex; align-items: center; justify-content: center; flex-direction: column - 图标用
font-size或width/height显式控制尺寸，避免依赖默认行高 - 避免在
.step里混用inline和block元素；统一用display: flex子项 - 慎用
vertical-align，它只对 inline 场景有效，且易受父级line-height干扰
移动端缩放后步骤条断裂或重叠
在 iOS Safari 或某些安卓浏览器里，页面缩放后，flex: 1 分配的空间可能计算失准，导致步骤项宽度突变、文字溢出、连接线错位。这不是 Flex 本身问题，而是视口单位（如 vh、rem）与缩放叠加后的渲染误差。
关键不是禁用缩放，而是让布局对缩放更鲁棒。
- 步骤条容器高度避免用
px固定，改用em或rem配合font-size缩放 - 连接线用
::after伪元素 +transform: scaleX(0.98)微调，避开整数像素截断 - 给
.step设置flex-shrink: 0，防止缩放时被强制压缩 - 测试时真机开启“显示放大字体”选项，比单纯 pinch-zoom 更暴露问题
flex: 1，而是所有步骤项的盒模型、内边距、字体度量、图标渲染路径都得保持一致——差一点，居中就偏一像素。 
