用@media (max-width: 768px)将.steps设为flex-direction: column实现垂直步骤条，需确保父容器display: flex、禁用position: absolute/float干扰，并用::after画线、data-step控制状态、.step自身flex布局对齐圆点与文字。
直接结论：用 @media (max-width: 768px) 覆盖 flex-direction: column，但必须确保父容器是 display: flex，且所有连线、圆点、文字对齐都按垂直流重写逻辑——不是“加个 media query 就完事”，而是整套渲染路径要适配主轴翻转。
为什么 flex-direction: column 必须写在父容器上，而不是每个步骤项上
因为 flex-direction 只控制**直接子元素的排列方向**。如果写在 .step（即 li 或 div）上，它只影响该步骤项内部的图标和文字，对整个步骤序列毫无作用。真正需要变向的是包裹所有步骤的容器，比如 .steps。
- 常见错误：
.step { flex-direction: column; }—— 这会让每个步骤自己竖排，但整体还是横着堆在一起 - 正确写法：
.steps { display: flex; flex-direction: row; } @media (max-width: 768px) { .steps { flex-direction: column; } } - 注意检查是否有
position: absolute或float破坏弹性上下文，它们会让flex-direction失效
垂直布局下连线为什么不能用 border-bottom
水平时 border-bottom 拉出的线能自然连接相邻步骤，但垂直后它会变成「左边框」或「顶部边框」，起止位置完全失控，而且无法单独控制某一段为虚线（比如 data-step="pending" 的线）。
- 正确做法：每个
.step设position: relative，用::after绝对定位画线 - 首项不画上连线：
.step:first-child::after { display: none; } - 末项不画下连线：
.step:last-child::after { display: none; } - 高度计算要减去上下两个圆点（各约
20px），否则线会穿出圆点区域
文字与圆点在垂直布局下对齐失常怎么办
靠 vertical-align: middle 或 top: 50% + transform: translateY(-50%) 在小屏多行文本下极易偏移——因为这些方式依赖固定行高或单行假设。
立即学习“前端免费学习笔记（深入）”；
- 稳解：让每个
.step自身成为 Flex 容器：.step { display: flex; align-items: flex-start; gap: 12px; } - 圆点用
::before生成，设flex-shrink: 0防缩放，尺寸用clamp(14px, 4vw, 18px)响应式缩放 - 文字区域加
min-width: 0; word-break: break-word;防溢出撑破布局 - 移动端务必加
align-items: flex-start，否则多行文字会让圆点悬在中间，视觉断裂
状态控制别堆 class，用 data-step 才可持续
写 class="step-active step-finished step-error" 看似直观，但 JS 更新时要反复增删多个 class，容易漏掉、顺序错乱，还可能和第三方样式冲突。
- 推荐结构：
<div class="step" data-step="active"> - CSS 用属性选择器：
.step[data-step="active"] .step-dot { background: #007bff; } - 连线虚实也靠它：
.step[data-step="pending"]::after { border-style: dashed; } - 这样 JS 只需改一个属性：
el.setAttribute('data-step', 'done')，干净无副作用
最常被忽略的不是布局翻转，而是垂直后状态色在手机阳光下的可读性——比如 #999 文字在白色背景上，小屏一亮就看不见。这不属于 flex 技术问题，但用户第一眼卡住的地方往往在这里。
