flex:1 在步骤条中不能直接使用，因其会压缩节点固有尺寸导致换行错位；应改用 justify-content: space-between + flex-shrink: 0 + white-space: nowrap；小屏通过 min-width、overflow-x: auto 和媒体查询优化；进度线宜用绝对定位+box-sizing统一；IE11需降级为 display: table 布局。
flex:1 在步骤条里为什么不能直接用
因为 flex:1 默认会压缩内容宽度，而步骤条的节点（比如圆点+文字）本身有固有尺寸，强行套 flex:1 会导致文字换行、图标错位，甚至节点被压扁。它适合“填空”，不适合“均分带内容的容器”。
真正要的是：节点之间等距，但每个节点自身宽度由内容决定，不被拉伸也不被压缩。
- 用
display: flex+justify-content: space-between替代flex:1，让首尾节点贴边、中间节点自动等距 - 所有步骤节点设为
flex: none或显式flex-shrink: 0，防止被 Flex 容器压缩 - 如果节点内含文字，加
white-space: nowrap防止意外折行
怎么让步骤条在小屏下自动缩排不换行
关键不是改 flex，而是控制节点最小宽度和容器 padding。移动端常见问题是节点挤成一团或文字重叠。
- 给外层容器加
min-width: fit-content，配合overflow-x: auto，允许横向滚动而非换行 - 每个节点用
min-width: max-content锁住内容最小宽度，避免被 flex 压缩到小于文字所需空间 - 媒体查询中降低
padding和字体大小，例如@media (max-width: 480px) { .step-item { padding: 4px 8px; font-size: 12px; } }
active 状态的进度线怎么和节点对齐不偏移
进度线（通常是伪元素或单独 <div>）容易在 flex 布局下因节点 margin/padding/box-sizing 不一致而错位，尤其 Safari 下更明显。
立即学习“前端免费学习笔记（深入）”；
- 进度线建议用绝对定位 +
left: 0和right: 0拉满，父容器设position: relative且overflow: hidden - 所有节点统一
box-sizing: border-box，并显式设置margin（不要依赖默认值） - 避免用
transform: translateX()控制进度，改用width+background渐变，更稳定
IE11 兼容时 flex:1 步骤条完全失效怎么办
IE11 对 flex: 1 解析异常，尤其是嵌套 flex 容器里，常表现为节点堆叠或宽度为 0。别硬扛，换思路。
- 放弃
flex:1，改用display: table布局：外层display: table; width: 100%，节点用display: table-cell; width: 1%（IE 会自动均分） - 进度线用
linear-gradient背景图实现，兼容 IE10+，比伪元素更可靠 - 务必给每个节点加
vertical-align: middle，否则 table-cell 内内容会顶部对齐
最麻烦的其实是节点内图标和文字的基线对齐——不同字体、不同 SVG 尺寸、不同 line-height 下，align-items: center 在 flex 里不一定真居中，得靠 vertical-align: middle 或微调 margin-top 补偿。
