直接用 flex-direction 切换步骤条方向可行，但需同步调整间距（用 gap 替代 margin）、对齐（align-items: flex-start）和响应式缩放（圆点宽高随 font-size 变化），并重测竖排状态下的色彩对比度。
直接用 flex-direction 切换步骤条方向是可行的，但多数人卡在“切了方向后样式全乱”，问题不在 flex 本身，而在没同步调整间距、对齐和尺寸响应逻辑。
为什么 flex-direction: column 一加就错
常见现象是竖屏下步骤节点堆叠、文字被截断、数字圆点和文字挤成一团，甚至状态色块错位。这不是 flex-direction 的 bug，而是它改变了主轴——原来靠 margin-right 控制的水平间距，在垂直主轴下变成无效或反向作用。
- 别在子项上写
margin-bottom同时又设gap，二者叠加导致间距翻倍 -
align-items: stretch（默认值）会让每个步骤项高度拉满父容器，竖排时高度不一致，建议统一加align-items: flex-start - 伪元素画的圆点（如
::before）若用固定width/height，小屏下会比文字还大，必须参与响应式缩放
用 gap 替代所有手写 margin 间距
gap 是唯一能自动适配主轴方向的间距控制方式：横排时是左右间隙，竖排时自动转为上下间隙。这是最省心也最可靠的方案。
- 把所有步骤项的
margin全删掉，只在父容器上设gap: 24px - 如果
gap在竖排后仍显紧凑，优先调大gap值，而不是给子项加margin - 配合
align-items: flex-start防止文字基线错位，尤其当步骤文字行数不一时
竖屏下文字与数字圆点缩放不同步怎么办
纯靠 rem 或 % 不够，因为字体大小变化了，但圆点宽高没跟上，视觉比例就崩了。
立即学习“前端免费学习笔记（深入）”；
- 数字圆点用
width/height+font-size一起缩放，例如：font-size: clamp(14px, 4vw, 18px); width: 1em; height: 1em; - 文字行高改用无单位值，如
line-height: 1.4，避免line-height: 20px这类固定值锁死缩放 - 如果用
transform: scale()画圆点，确保它包裹在同样响应式的容器里，否则 scale 基准会漂移
最容易被忽略的对比度陷阱
布局调好了，用户一拿手机在阳光下看，发现 “pending” 状态的灰色文字根本看不见——这不是代码问题，是设计盲区。竖排后步骤状态的视觉反馈必须重测。
比如 color: #999 在桌面屏上刚好，到手机屏上因亮度高、像素密度大，实际对比度可能低于 WCAG 4.5:1 最低标准。真要上线，得用 DevTools 的无障碍面板实测，不能只靠肉眼判断。
