flex-direction在rtl下不会自动翻转，需手动用[dir="rtl"]设置row-reverse；justify-content:start随dir自动映射，而flex-start始终固定主轴起点；writing-mode影响align-items语义；flex-wrap折行起点在rtl下为右下角。
flex-direction 在 RTL 环境下不会自动翻转
很多人以为给 html 加了 dir="rtl"，display: flex 的主轴方向就会跟着变——不会。默认的 flex-direction: row 在 LTR 和 RTL 下行为完全一致，依然从左往右排子元素。
真正影响排列方向的是 flex-direction 值本身，不是文档书写方向。要适配 RTL，得手动干预：
- 用
[dir="rtl"] .container { flex-direction: row-reverse; }覆盖 - 或改用
flex-direction: row+direction: rtl配合text-align，但仅对文字对齐有效，不改变 flex 顺序 - 更稳妥的做法是用逻辑属性：把
flex-direction: row换成flex-direction: inline-start？不行——CSS Flexbox 目前不支持inline-start作为flex-direction值（会忽略）
justify-content: flex-start 不等于 justify-content: start
justify-content: flex-start 是基于 flex 容器主轴起点的定位，而 justify-content: start 是逻辑值，会随 direction 或 dir 自动映射到左/右。
这意味着：
立即学习“前端免费学习笔记（深入）”；
-
justify-content: flex-start在 LTR 和 RTL 下都固定在容器左端（主轴起点），不响应书写模式 -
justify-content: start在dir="ltr"下等价于flex-start，在dir="rtl"下等价于flex-end - 浏览器支持上，
start/end作为justify-content值已稳定（Chrome 89+、Firefox 89+、Safari 14.1+），但旧版 Safari 可能回退为flex-start
align-items 和 writing-mode 的隐式耦合
当容器设置了 writing-mode: vertical-rl（竖排右到左），align-items: center 的“中心”含义会悄悄变——它对齐的是**块级维度的中心**，也就是垂直方向的中点，而非你肉眼看到的水平线。
常见误判场景：
- 竖排文字 +
flex-direction: column+align-items: center→ 文字看起来偏上，因为“center”此时指垂直方向居中，而文字本身有 descender，视觉重心下沉 - 解决办法不是换
align-items，而是加align-self: stretch或用margin: auto控制单个子项 - 若需严格按视觉基线对齐，
align-items: baseline更可靠，但需确保所有子项有可比的font-size和line-height
RTL 下 flex-wrap: wrap 的折行起点容易被忽略
flex-wrap: wrap 在 RTL 容器中，折行后的第二行起点不是“左下角”，而是“右下角”——因为主轴仍是水平，但方向反了，所以新行会从右侧开始填充。
这会导致布局错位，尤其在卡片网格中：
- 没加
[dir="rtl"] .grid { justify-content: flex-end; }时，最后一行可能只有一张卡，还靠右悬空 - 更健壮的写法是统一用
justify-content: center，避免依赖起点方向 - 如果必须保持两端对齐，用
justify-content: space-between+dir="rtl"时，首尾间距逻辑不变，但“首”变成右边，“尾”变成左边——这点调试时用 DevTools 的 flex overlay 一眼就能看清
书写模式和弹性盒子的交集不在语法层面，而在渲染时序：flex 计算先于 writing-mode 对齐生效，所以所有 flex-* 属性都得按主轴物理方向理解，不能指望它“懂”语言方向。真要自动适配，只能靠 CSS 逻辑属性 + 显式 [dir] 选择器兜底。
