flex布局是实现步骤条最直接可控的方式，需设display:flex和flex-wrap:nowrap，用justify-content控制对齐，.step用flex:0 1 auto或flex:1分配空间，连接线用伪元素实现，状态样式与布局逻辑必须分离。
Flex 布局是实现步骤条（Step Indicator）最直接、最可控的方式，无需 JS 计算宽度或位置，也不依赖伪元素 hack。关键在于用 flex 容器统一控制主轴对齐与间距，再用 flex-basis 或 flex 缩放子项来分配空间。
步骤条容器必须设为 display: flex 且禁用换行
步骤条本质是一维线性结构，所有步骤节点应在同一行排列，不能折行。若未显式设置 flex-wrap: nowrap，在窄屏下可能意外换行，破坏逻辑顺序。
-
display: flex是基础，否则子项无法参与弹性分配 -
flex-wrap: nowrap必须写明——虽然它是默认值，但显式声明可避免被 CSS 重置规则覆盖 -
justify-content: space-between最常用：让首尾步骤贴边，中间自动均分间隙；若要首尾对齐左/右，改用flex-start或flex-end - 不要用
text-align控制对齐，它对 flex 子项无效
每个步骤节点需用 flex 属性控制占比和收缩行为
步骤条里“已完成”“进行中”“未开始”状态通常靠类名切换，但布局结构必须稳定。常见错误是给每个 .step 设固定 width，导致响应式失效或文字溢出。
- 推荐写法：
.step { flex: 0 1 auto; }—— 不放大（0）、可缩小（1）、初始尺寸由内容决定 - 若需等宽（如 4 步平分 100%），改用
.step { flex: 1; }，但注意文字过长时会挤压，此时应加min-width: 0配合overflow: hidden防撑开 - 绝对避免
flex: 0 0 25%这类硬编码百分比，它无法响应子内容变化，且在 flex 容器中语义混乱
连接线（line）必须用伪元素或额外元素，不能靠 margin 模拟
步骤之间的横线常被误认为可用 margin-right 实现，但这样会导致最后一个步骤多出冗余空白，且无法独立控制线条颜色/高度。
- 正确做法：在每个
.step后添加::after伪元素，设content: ""+position: absolute，或用单独的.line元素插入步骤之间 - 若用伪元素，父
.step需设position: relative，且::after的宽度建议用calc(100% - 1em)留出图标/数字间距 - 连接线高度建议设为
2px，颜色用currentcolor继承文字色，便于主题切换
状态切换依赖 class 控制，但布局属性绝不写在状态类里
很多人把 background-color 和 flex 写进 .step.active，结果发现激活态一变，整个布局就错位。布局逻辑和视觉状态必须分离。
- 所有
flex相关属性（flex、flex-grow、align-self等）只写在基础.step上 - 状态类仅负责
color、background-color、border、opacity等纯视觉属性 - 若需“已完成”步骤加勾号图标，用
::before伪元素 +content: "✓"，不要插入真实 DOM 节点，避免干扰 flex 流
真正难的不是写出来，而是保证步骤数动态增减时，连接线长度、文字截断、移动端堆叠逻辑依然健壮——这些都得靠 flex-basis 和 min-width 的组合控制，而不是靠 JS 补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
