flex-direction 不会自动响应横竖屏切换，必须配合 @media (orientation: ...) 显式声明并确保父容器为 flex 容器；常见失效原因包括 display 未设置、样式被覆盖、默认值无变化、js 监听不可靠及高度设置不当。
只靠 flex-direction 无法自动响应横竖屏切换，必须配合 @media (orientation: portrait) 或 @media (orientation: landscape) 显式声明，并确保父容器始终是 flex 容器。
为什么 flex-direction 在横竖屏切换时经常“没反应”
浏览器不会因为设备旋转就重算 flex-direction —— 它只响应 CSS 规则是否匹配，不感知物理朝向变化。常见失效原因：
-
display: flex没写在父容器上，或被更高权重的选择器（如 ID 或内联样式）覆盖 - 写了
@media (orientation: landscape) { .container { flex-direction: row; } }，但默认状态也是row，切换前后无差异 - 用
window.orientationJS 监听并手动加 class，但 iOS Safari 已废弃该 API，且部分 Android 返回值不可靠 - 父容器高度为
auto，竖屏下内容撑开、横屏下因100vh截断，导致子项渲染异常，误以为flex-direction失效
正确写法：用 @media (orientation: ...) + 强制方向覆盖
orientation 媒体查询必须和 flex-direction 配合使用，且要打破“默认即正确”的惯性。关键点：
- 默认设
flex-direction: column（竖屏友好），再在@media (orientation: landscape)中显式切为row - 必须同步检查
height和min-height：横屏时100vh可能只剩 390px，改用min-height: 100dvh或降级为min-height: 100%+html, body { height: 100% } - 避免混用
margin和gap：margin-bottom在column下有效，切到row后变成“向下推”，破坏横向对齐；统一用gap更安全 - 文字尺寸别用纯
vw：横屏下font-size: 4vw会暴增，改用font-size: clamp(14px, 2.5vw, 16px)
比 orientation 更稳的替代方案：优先用宽度断点
真实场景中，“竖屏 ≠ 小屏”。折叠屏展开后竖屏宽度可能超 800px，而老平板横屏才 600px。单靠 orientation 容易错判：
- 推荐主逻辑走
@media (max-width: 768px)默认竖排，@media (min-width: 769px)切横排 - 真需处理小屏横屏（如手机拍视频页），叠加写：
@media (orientation: landscape) and (max-width: 768px) - 所有
flex-direction切换都必须配justify-content和align-items调整：竖屏常用justify-content: flex-start，横屏常需justify-content: center或space-between - 伪元素（如步骤圆点）定位失效？每个子项必须有
position: relative，否则::before会脱离上下文“飘”走
容易被忽略的兼容性细节
看似简单的属性切换，在旧版 Safari 和部分安卓 WebView 里仍有坑：
-
100dvh在 Android Chrome 100 以下不支持，iOS Safari 16.4+ 才稳定；降级方案必须存在 -
flex-direction: column-reverse在 iOS ≤12.5 需加-webkit-flex-direction: column-reverse -
order属性动画在 Safari 中易闪烁，频繁 JS 修改order值不如切换 class 稳定 - 横屏下若内容溢出却不滚动，不是
flex-direction的问题，而是忘了给直接包裹子项的容器加overflow-y: auto
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
