flex-direction 不会自动响应横竖屏切换，必须用 @media (orientation: ...) 显式声明且父容器为 flex/grid；常见失效原因包括 display 未设置、样式被覆盖、高度截断等，应优先用宽度断点并同步调整 justify-content、gap、字体和可访问性细节。
单靠 flex-direction 不会自动响应横竖屏切换，必须搭配 @media (orientation: ...) 显式声明，且父容器必须是 flex 或 grid 容器——否则样式写了也无效。
为什么 flex-direction 在旋转后“没反应”
浏览器不感知物理旋转，只按 CSS 规则是否匹配来渲染。常见失效原因包括：
-
display: flex没写在父容器上，或被更高权重选择器（如内联样式、!important）覆盖 - 默认和横屏都设了
flex-direction: row，切换前后无视觉变化 - 用
window.orientation监听加 class，但该 API 在 iOS Safari 已废弃，Android 返回值也不稳定 - 父容器高度为
auto或100vh，横屏时内容被截断，误判为布局失效
正确写法：用 @media (orientation: ...) + 强制方向覆盖
不要依赖“默认即正确”，要主动打破惯性：
- 默认设
flex-direction: column（竖屏友好），再在@media (orientation: landscape)中显式切为row - 同步检查高度：横屏下
100vh可能只剩 390px，改用min-height: 100dvh，或降级为min-height: 100%+html, body { height: 100% } - 删掉子项上的
margin-bottom等固定方向间距，统一用gap—— 它会随flex-direction自动翻转作用轴 - 文字尺寸别用纯
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会脱离上下文定位 - 竖屏下
color: #999在阳光直射屏幕上看不清？必须同步检查 WCAG AA 对比度（≥ 4.5:1），必要时改背景色而非只调文字色 - 按钮竖排后点击热区太小？加
padding: 16px 20px+width: 100%，别依赖默认行高撑开
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
