只需改flex-direction即可切换布局方向，但需同步更新gap替代margin、确保父容器display:flex、各步骤项设position:relative以固定伪元素定位，并用媒体查询在max-width:768px时仅覆盖必要样式。
直接改 flex-direction 就能切方向，但多数人卡在「切完就错位」「竖屏文字挤成一团」「进度线断掉」——问题不在 flex 本身，而在它和其他样式（gap、margin、伪元素定位）的配合逻辑没理清。
为什么只改 flex-direction: column 后步骤乱了
因为 flex 容器方向变了，但子项的间距控制方式没同步更新。比如原来用 margin-right 控制水平间隔，垂直时这个 margin 还在右边，根本不起作用；又或者用了 gap 却忘了父容器没设 display: flex，导致 gap 被忽略。
-
flex-direction必须作用于直接包裹所有步骤项的容器（如.steps），不是外层 wrapper 或 body - 确保该容器有
display: flex，否则flex-direction不生效 - 把所有手动写的
margin-top/margin-right全换成gap：它会自动适配主轴方向——横排时是左右间距，竖排时是上下间距 - 如果用了
gap还不对，检查是否父容器设了align-items: stretch，导致各步骤高度不一致；可加align-items: flex-start统一对齐顶部
如何用媒体查询安全切换方向而不破坏阅读流
关键不是“加响应式”，而是「只在真正需要时覆盖」。写死 flex-direction: column 在桌面端也会竖排，反而让长流程难以横向扫读。
- 断点推荐用
@media (max-width: 768px)，覆盖主流竖屏手机宽度，比设备判断更稳定 - 只在媒体查询里改变化的属性：比如只写
flex-direction: column和gap: 1.5rem，其他如justify-content、align-items让它继承默认值 - 避免对每个
.step单独设width: 100%——flex 项默认不撑满，该控制宽度的是父容器或用flex: 1 - 如果步骤含图标或数字圆点，别依赖固定
px尺寸；用font-size: clamp(14px, 4vw, 18px)让文字和伪元素一起缩放
垂直排列后伪元素画的进度线/圆点偏移或重叠
这不是 flex 的锅，是定位上下文没隔离。伪元素（如 .step--active::before）默认相对于最近的已定位祖先找位置，而你很可能漏写了 position: relative。
- 每个步骤项（
.step）必须设position: relative，否则伪元素会“飘”到 body 或其他父级上 - 圆点只定义在状态类上，比如只写
.step--active::before，别泛化成.step::before - 用
top: 50%+transform: translateY(-50%)居中，而不是固定top: 20px——这样不管文字几行、图标多大，圆点始终垂直居中 - 进度线建议用
background-image: linear-gradient()实现，比 border 更可控；小屏下可单独在媒体查询里加宽到4px并调浅颜色，避免看不清
最容易被忽略的视觉断层：状态色在竖屏下对比度不足
布局调好了，但用户第一眼点不开，是因为 .step--pending 的灰色文字在手机阳光直射下完全看不见。这不是 flex 或 media query 能解决的，得手动重测所有状态色在不同背景下的 WCAG 对比度。
尤其注意：竖排后步骤间距变大，相邻步骤之间留白更多，原本还凑合的灰度现在更显弱；别只改字体大小，优先换色值——比如把 #999 换成 #666，或加个轻微描边提升可读性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
