在css3中实现多步骤进度条，核心是利用flexbox的`flex-grow`属性让每个步骤节点自动平分容器宽度，并通过伪元素或子元素绘制连接线。具体做法是创建一个包含所有步骤的父容器设置`display: flex`，每个步骤项设置`flex: 1`，利用相邻兄弟选择器或特定类名控制连接线的显示与隐藏，从而构建出响应式的步骤条结构。
如何定义步骤条的基础HTML结构与Flex布局
基础结构由一个父容器和多个子步骤节点组成。父容器使用`display: flex`启用弹性布局，子节点通过`flex: 1`均分空间。这种布局方式确保了无论有多少个步骤，它们都能自动适应容器宽度，无需手动计算百分比。
<div class="progress-bar"> <div class="step active"></div> <div class="step completed"></div> <div class="step"></div> </div>
上述代码中，`.progress-bar`是Flex容器，`.step`是子项。`.active`表示当前步骤，`.completed`表示已完成步骤。默认情况下，未激活的步骤为灰色，已完成的为蓝色，当前的为高亮色。这种结构简洁且易于扩展。
预期结果：三个步骤节点在容器中水平排列，宽度相等，间距由Flexbox默认行为决定（通常为0，需额外设置gap或margin）。
如何利用伪元素绘制步骤间的连接线
连接线通常通过子节点的伪元素`:after`实现。每个步骤节点右侧绘制一条线，但最后一个节点不需要右侧线条。通过CSS选择器`.step:not(:last-child)::after`可以精确控制这一行为。线条的颜色根据前一个步骤的状态动态变化：如果前一个步骤是`completed`，则线条为蓝色；否则为灰色。
.step {
position: relative;
flex: 1;
height: 4px;
background-color: #e0e0e0;
}
.step::after {
content: '';
position: absolute;
right: -50%;
top: 0;
width: 100%;
height: 100%;
background-color: #e0e0e0;
z-index: -1;
}
.step.completed::after {
background-color: #007bff;
}
注意：这里使用`right: -50%`和`width: 100%`是为了让线条从当前节点中心延伸到下一个节点中心，避免重叠或间隙。实际项目中可能需要调整`z-index`确保线条位于圆圈下方。
预期结果：已完成步骤之间的连接线变为蓝色，未完成步骤之间的连接线保持灰色，形成视觉上的进度引导。
基于当前步骤状态如何更新节点样式
当用户点击某个步骤或程序逻辑推进时，需要更新对应节点的类名以反映其状态。例如，将当前步骤标记为`active`，将其之前的所有步骤标记为`completed`，之后的步骤保持默认状态。这可以通过JavaScript操作DOM类名实现，或者在纯CSS场景中通过预定义类名模拟。
.step.active {
background-color: #007bff;
}
.step.active::before {
content: '●';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
color: #007bff;
font-size: 16px;
}
上述代码为当前步骤添加了圆形标记和背景色变化。结合之前的连接线逻辑，整个进度条会呈现出清晰的视觉层次：已完成部分为蓝色实心，当前部分为蓝色高亮，未完成部分为灰色。
验证输入：假设有一个三步进度条，第一步和第二步已完成，第三步为当前步骤。运行后，第一步和第二步之间的连接线为蓝色，第二步和第三步之间也为蓝色，第三步节点本身为蓝色并带有圆形标记。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
