如何设置CSS使指示条在竖屏下自动垂直排列并指示响应式步骤？

本文共计887个文字，预计阅读时间需要4分钟。

使用 `flex-direction` 控制主轴方向是最直接的方法。横屏默认水平，竖屏默认垂直。关键不是加样式，而是在合适断点改方向。别写 `flex-direction: column`，否则横屏也竖着，阅读流破坏。

• 用媒体查询监听宽度，比如 @media (max-width: 768px) 覆盖移动端常见竖屏宽度
• 确保父容器是 display: flex，否则 flex-direction 不生效
• 避免对每个 .step 单独设 width: 100% —— flex 项默认不撑满，该撑满的是父容器或用 flex: 1

为什么用 flex 而不用 grid？

grid 确实能做，但步骤条本质是线性序列，flex 更轻量、语义更准、兼容性更好（IE11 都支持 flex-direction，而 grid 在 IE 中需额外前缀且行为不一致）。除非你要做复杂交错布局（比如步骤带侧边说明），否则没必要上 grid。