结论：direction和writing-mode不适用于屏幕方向切换布局，应使用@media (orientation: portrait/landscape)配合flex-direction等布局属性实现响应式控制。
直接说结论：direction 和 writing-mode 都不适用于“根据屏幕方向（portrait/landscape）动态切换布局”，它们管的是文本流与书写方向，不是容器级的响应式流向控制。
direction: ltr / rtl 只影响文本和表单元素的默认对齐与顺序
它会让 text-align: start 指向左或右，让 input[type="number"] 的增减按钮换边，让 :dir(rtl) 选择器生效——但不会让一个 .container 里的子元素从左到右变成从右到左排列，更不会触发 flex 或 grid 的主轴翻转。
常见误用现象：
- 给父容器设
direction: rtl，以为能“镜像整个布局”，结果只是文字右对齐、表单按钮反了，flex-direction: row依然从左到右（视觉上因 direction 影响，看起来像反了，但实际 DOM 顺序和 flex 流没变） - 在响应式中监听 orientation 后强行切
direction，导致屏幕阅读器读取顺序混乱，且对图片、卡片等非文本块毫无作用
真正需要“左右互换图文位置”时，该用 flex-direction: row-reverse 或 order，而不是 direction。
writing-mode: vertical-lr / vertical-rl 改变的是行内盒的流向，不是布局容器方向
它让文字从上到下排，行从左到右（vertical-lr）或从右到左（vertical-rl），同时把 width 和 height 的含义互换。但它不改变 flex 容器的 flex-direction，也不影响 grid 的轨道定义。
典型误用场景：
- 想让一列卡片在横屏时变成“从上到下、从左到右”的瀑布流，于是加
writing-mode: vertical-lr—— 结果文字全竖着了，卡片本身还是横向堆叠，甚至溢出容器 - 配合
flex-direction: column一起用，发现子项高度塌陷、justify-content失效 —— 因为 writing-mode 已经把主轴逻辑搅乱，flex 属性不再按预期映射
若真要实现垂直书写 + 布局流同步调整，必须显式重设所有相关属性：flex-direction、justify-content、align-items，并确保子项的 flex-basis 或 width/height 适配新流向。这不是开箱即用的方案。
orientation 变化该用什么响应？media query + flex-direction 是正解
浏览器原生支持的 @media (orientation: portrait) 和 @media (orientation: landscape) 是唯一可靠监听屏幕物理方向的方式。配合 flex-direction 切换，才能干净控制容器级流向。
实操要点：
- 别用 JS 监听
screen.orientation后手动切 class —— iOS Safari 对该 API 支持不稳定，且 orientation change 事件在某些安卓机型上延迟高或不触发 - 优先写
@media (orientation: portrait)基础样式，再用@media (orientation: landscape)覆盖，避免 fallback 逻辑复杂化 - 如果需兼容老浏览器（如 IE11），降级用
@media (min-aspect-ratio: 1/1)，但注意它只反映宽高比，不能区分平板横屏和手机横屏的语义差异 - 切方向时，记得同步检查
justify-content和align-items：flex-direction: column下，justify-content: center控制上下居中，不是左右
示例：
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
@media (orientation: portrait) {
.card-grid {
flex-direction: column;
}
}
@media (orientation: landscape) {
.card-grid {
flex-direction: row;
}
}
容易被忽略的兼容性与可访问性陷阱
很多开发者以为只要 CSS 生效，布局就稳了。但实际落地时，两个点常被跳过：
-
writing-mode在 Firefox 中对input和textarea的光标行为支持不一致，开启后可能无法正常输入中文；direction在 VoiceOver 中会强制改变阅读顺序，若 DOM 结构没同步调整，会导致屏幕阅读器跳过内容或重复朗读 - 用
flex-direction: row-reverse实现“图文右左切换”时，若图片是<img>标签且含alt，其语义顺序未变，但视觉上图在右、文在左——这本身没问题；可一旦加上tabindex或用键盘导航，焦点顺序仍按 HTML 顺序走，用户 tab 时先到图再图文，体验割裂
所以，方向切换不是纯视觉问题，它牵扯到渲染流、语义流、焦点流三者是否对齐。任何绕过 DOM 顺序、只靠 CSS 翻转的方案，都要多问一句：屏幕阅读器怎么读？键盘用户怎么 tab？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
