不会。flex-direction 默认完全无视 direction 属性，即使父容器设了 direction: rtl，row 仍从左到右排；需手动用 row-reverse 或结合 :root[dir="rtl"] 动态切换，并注意 logical properties 仅影响对齐不改变主轴方向。
flex-direction 会受 direction: rtl 影响吗？
不会。这是最常见的误解——flex-direction 默认完全无视 direction 属性，哪怕父容器设了 direction: rtl，flex-direction: row 依然从左到右排，不会自动翻转。
想让 flex 项目在 RTL 下自动镜像，该用哪个属性？
用 row-reverse 或 column-reverse 手动控制，但更稳妥的做法是结合 direction 动态切换 flex-direction 值：
- 当
direction: ltr→flex-direction: row - 当
direction: rtl→flex-direction: row-reverse
注意：别依赖 CSS 自动推断；浏览器不把 direction 当 flex 布局的“上下文开关”。
为什么直接写 [dir="rtl"] { flex-direction: row-reverse } 不够？
因为 dir 属性可能出现在任意祖先节点（比如 ），而你写的 CSS 选择器必须精确匹配作用范围：
立即学习“前端免费学习笔记（深入）”；
- 如果全局 RTL 由
控制，就该用html[dir="rtl"] .my-flex - 如果组件自己带
dir，比如<div dir="rtl" class="menu">，才用 <code>[dir="rtl"] .menu - 用
:root[dir="rtl"]比html[dir="rtl"]更安全（兼容 Shadow DOM 场景）
漏掉层级或选错根节点，样式就压根不生效。
用 logical properties 替代 flex-direction 可行吗？
不行。justify-content: start/end、align-items: flex-start/flex-end 这类逻辑值确实响应 direction，但它们只影响对齐方式，不改变主轴方向本身。
例如：justify-content: flex-end 在 RTL 下仍往右对齐（即视觉上的“左”），但项目顺序还是按原始 HTML 顺序排列——这和真正需要的“项目顺序翻转”不是一回事。
真要顺序翻转，还是得靠 flex-direction: row-reverse 配合 direction 判断。
最易被忽略的一点：flex 项目的 order 值不会因 direction 改变而重算，它始终基于 DOM 顺序 + 显式 order 计算。所以别指望 RTL 能“自动重排”乱序的 flex 项。
