flex-direction不会因dir="rtl"自动翻转，必须显式设置row-reverse；justify-content:start随方向自动映射，flex-start则始终锚定物理起点；row-reverse仅反转视觉顺序，不影响DOM和可访问性。
flex-direction 不会因 dir="rtl" 或 direction: rtl 自动改变——这是最常踩的坑。你加了 html[dir="rtl"]，但子元素还是从左往右排，不是 CSS 失效，而是它本来就不响应这个属性。
为什么 flex-direction: row 在 RTL 下不翻转？
Flexbox 的主轴方向完全由 flex-direction 值决定，和文档书写方向无关。浏览器不会把 dir="rtl" 当作布局上下文开关。flex-direction: row 在 LTR 和 RTL 下都固定为“从左到右”，row-reverse 则始终是“从右到左”。
正确做法：用 [dir="rtl"] 覆盖 flex-direction
显式声明方向依赖的布局规则，而不是寄希望于自动适配：
- 给容器加类或直接写
[dir="rtl"] .container { flex-direction: row-reverse; } - 如果用 CSS 自定义属性，可配合
:root[dir="rtl"] { --flex-dir: row-reverse; }，再在容器中写flex-direction: var(--flex-dir); - 避免只写
flex-direction: row然后指望 RTL 环境下“应该懂”，它真不懂
justify-content: start vs flex-start 的区别必须分清
这两个值行为完全不同，混用会导致 RTL 下对齐错位：
-
justify-content: flex-start永远锚定主轴物理起点（即左），不管dir是什么 -
justify-content: start是逻辑值，dir="ltr"时等于flex-start，dir="rtl"时等于flex-end - 现代浏览器（Chrome 89+、Firefox 89+、Safari 14.1+）已稳定支持
start/end，但旧版 Safari 可能回退为flex-start，需测试
row-reverse 的副作用不能忽略
flex-direction: row-reverse 看似简单，但会悄悄影响多个行为：
立即学习“前端免费学习笔记（深入）”；
-
margin-left: auto不再推右，而是推左（因为主轴反向，“auto margin 远离起点”的方向也反了） -
nth-child(1)选中的是 DOM 第一个元素，但它在界面上显示在最右边，容易写错样式逻辑 - 屏幕阅读器仍按原始 DOM 顺序读取，可能造成可访问性问题
- 若容器本身已有
dir="rtl"，再叠加row-reverse，可能导致双重复位（比如聊天气泡 + RTL 页面同时启用）
row-reverse，而是判断什么时候该用它、什么时候该用 justify-content: start、什么时候该换 margin-inline-end ——这些选择背后是布局意图的差异，不是语法对错。 
