竖向步骤条需用flex-direction: column布局，连接线用伪元素绝对定位并精确计算高度，通过data属性控制状态，配合语义化HTML和可访问性优化。
竖向步骤条本质是“垂直排列的步骤节点 + 连接线”，不是靠 transform 或 writing-mode 强转横排组件，而是从布局逻辑上按列组织。
用 Flex 布局实现垂直流式步骤条
核心是让步骤容器设为 flex-direction: column，每个步骤项（step）作为子元素自然纵向堆叠。连接线用伪元素或单独 <div> 实现更可控。
- 步骤容器加
display: flex和flex-direction: column，禁用flex-wrap - 每个步骤项用
position: relative，方便在左侧/右侧画连接线 - 连接线推荐用
::before伪元素：绝对定位 +height控制长度，避免额外 DOM 节点 - 首项不画上线，末项不画下线 —— 用
:first-child/:last-child配合visibility: hidden或height: 0
CSS 中控制连接线长度和对齐的关键点
竖向步骤条最常出错的是连接线“看起来断开”或“偏移错位”，问题几乎都出在线条高度计算和定位基准上。
- 连接线高度 = 当前步骤项高度的一半 + 下一项高度的一半 − 间距（比如
gap: 16px时，线高 =50% + 50% − 8px） - 更稳妥做法：给每个步骤项设固定
min-height（如min-height: 64px），连接线统一用height: calc(100% - 16px) - 若用伪元素画线，
top: 50%+transform: translateY(-50%)可让线条垂直居中于两步之间 - 左侧线建议固定宽度（如
2px），颜色用border-color或background，避免阴影/圆角干扰对齐
用 CSS 变量动态控制当前步骤状态
进度高亮不能只靠 class 切换，否则维护成本高；用 CSS 自定义属性配合 [data-step] 更易扩展。
立即学习“前端免费学习笔记（深入）”；
- 给步骤容器加
data-current="2"，各步骤项用data-index="1"、data-index="2"等标记顺序 - CSS 中写：
[data-current="2"] [data-index="1"] .step-dot { background: #409eff; }，显式控制已完成态 - 当前步骤项的连接线下方需截断：用
[data-index="2"]::after { display: none; }隐藏其下方连线 - 支持「未开始」「进行中」「已完成」三态时，建议用
data-status="pending | active | finished"，比纯数字更语义清晰
移动端适配与可访问性注意项
竖向步骤条在小屏上容易挤压变形，且屏幕阅读器可能无法正确识别流程顺序。
- 避免用
vw设定步骤项宽度，改用max-width: 100%+padding-inline保证内边距 - 连接线在窄屏上建议缩为
1px宽，并用opacity: 0.7降低视觉权重 - 必须为每个步骤项包裹
<li>并置于<ol>内，用aria-label补充步骤含义（如aria-label="第 2 步：填写收货信息"） - 禁用
user-select: none—— 用户可能需要复制步骤中的提示文案
真正难的不是画出一根竖线，而是让每一步的视觉节奏、状态反馈、焦点顺序和缩放行为全部对齐用户预期。尤其是当步骤内容长短不一、图标尺寸不同、或需要服务多语言文本时，min-height、align-items 和伪元素的 top 计算会立刻暴露问题。别省那几行 CSS —— 多写一个 :not(:last-child) 比后期 debug 十分钟强。
