直接改 flex-direction 能切换布局方向，但需配合 gap、position 和容器高度；常见失效原因是父容器未设 display: flex、高度为 auto、子项脱离文档流或被 overflow 压扁；响应式切换应仅在媒体查询中修改 flex-direction 和 gap，避免冗余覆盖，并确保伪元素定位上下文隔离与滚动容器正确设置。
直接改 flex-direction 就能切换，但多数人切完发现错位、文字挤成一团、进度线断掉——问题不在属性本身，而在它和 gap、position、容器高度的配合没理清。
为什么只加 flex-direction: column 在小屏下不生效
常见原因是父容器根本没进入 Flex 上下文：
-
display: flex没写，或写在了外层 wrapper 而非直接包裹子项的容器上 - 父容器高度为
auto（比如没设min-height: 100vh或height: 100%），子项在column下无法分配空间 - 子项用了
float、position: absolute或display: none，直接脱离弹性流 - 父容器被
overflow: hidden或height: 0“压扁”，内容不可见但实际存在
怎么用媒体查询安全切换方向而不破坏阅读流
关键不是“加响应式”，而是只在真正需要时覆盖必要样式：
- 断点用
@media (max-width: 768px)，比设备判断更稳定 - 只在媒体查询里改
flex-direction: column和gap，其他如justify-content让它继承默认值 - 避免对每个子项写
width: 100%——控制宽度的是父容器或用flex: 1 - 如果含图标或数字圆点，别用固定
px尺寸；用font-size: clamp(14px, 4vw, 18px)让文字和伪元素一起缩放
垂直排列后伪元素定位偏移或重叠
这不是 flex-direction 的锅，是定位上下文没隔离：
立即学习“前端免费学习笔记（深入）”；
- 每个步骤项（如
.step）必须显式设position: relative，否则::before/::after会“飘”到body或其他祖先上 - 圆点类（如
.step--active::before）只定义在状态类上，别泛化成所有.step::before - 进度线建议用
background实现，比border更可控；小屏下可在媒体查询里单独加宽到4px并调浅颜色
切换后内容溢出却不滚动？
overflow-y: auto 必须显式加，Flex 不自动处理溢出：
- 滚动容器必须是直接包裹子项的那层（比如
.steps或.nav），不是外层wrapper - 避免用
height: fit-content替代高度约束——它不触发滚动，只随内容伸缩 - iOS Safari 旧版本对
min-height支持不稳定，关键容器优先用height: 100%或flex: 1
最容易被忽略的不是代码写没写对，而是 gap 和 margin 的混用、伪元素缺少 position: relative、以及断点里多写了不该覆盖的属性——这些细节一错，整个流程就卡在“看起来像动了，其实没动对”。
