如何用CSS实现表单步骤条布局，使连接线适配不同Flexbox？

核心布局方案 #

用Flexbox实现整体均分布局，每个步骤项平分可用空间，通过伪元素绘制步骤间的连接线，避免单独渲染连接线导致的间距问题。按钮固定宽度，标题自适应换行，完全贴合Material UI的步骤条效果。

具体实现步骤 #

1. 外层容器布局
   给步骤条容器设置display: flex; align-items: center;，让所有步骤项垂直居中，整体宽度占满父容器。

2. 步骤项结构
   每个步骤项设置为flex: 1; display: flex; flex-direction: column; align-items: center; position: relative;，确保每个步骤项平分宽度，按钮与标题垂直排列并居中。

3. 连接线实现
   给除第一个步骤外的所有步骤项添加::before伪元素，绝对定位在步骤项左侧，宽度100%，高度为连接线厚度，z-index设为-1让其处于按钮下方，自动填充两个按钮间的空间，无需手动计算距离。

4. 状态样式控制
   通过绑定类名区分「未激活」「激活中」「已完成」三种状态，对应切换按钮、标题、连接线的样式。

Vue 完整代码示例 #

<template>
  <div class="form-stepper">
    <div 
      v-for="(step, index) in steps" 
      :key="step.id"
      :class="[
        'stepper-item', 
        { active: index <= currentStep },
        { completed: index < currentStep }
      ]"
    >
      <button class="step-button">
        {{ index < currentStep ? '✓' : index + 1 }}
      </button>
      <span class="step-title">{{ step.title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 0,
      steps: [
        { id: 1, title: '基础信息填写' },
        { id: 2, title: '个人资质上传（身份证、学历证明）' },
        { id: 3, title: '确认并提交' }
      ]
    }
  }
}
</script>

<style scoped>
.form-stepper {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 24px 0;
  gap: 0;
}

.stepper-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 步骤间连接线 */
.stepper-item:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px; /* 与按钮垂直居中对齐，根据按钮高度调整 */
  width: 100%;
  height: 2px;
  background-color: #e5e7eb;
  z-index: -1;
}

/* 已完成/激活状态的连接线 */
.stepper-item.completed::before,
.stepper-item.active::before {
  background-color: #3b82f6;
}

.step-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.stepper-item.completed .step-button {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}

.stepper-item.active .step-button {
  border-color: #3b82f6;
  color: #3b82f6;
  background-color: #eff6ff;
}

.step-title {
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  word-wrap: break-word;
  max-width: 100%;
}

.stepper-item.active .step-title,
.stepper-item.completed .step-title {
  color: #1f2937;
  font-weight: 500;
}
</style>

关键细节说明 #

• flex: 1：强制每个步骤项平分整个步骤条宽度，无论标题长短，按钮始终保持均匀间距。
• 伪元素连接线：利用绝对定位自动适配步骤项宽度，避免单独渲染连接线导致的布局偏移，同时通过z-index让其处于按钮下方，不遮挡交互元素。
• 状态切换：通过currentStep变量控制步骤状态，样式自动同步，无需额外处理连接线的位置计算。

内容的提问来源于stack exchange，提问作者nebulaguy