dir="rtl"自动翻转Flex主轴起点（如justify-content: flex-start对齐右侧），但margin-left等物理属性仍固定作用于屏幕左侧，必须改用margin-inline-start等逻辑属性才能随文本流自适应。
仅设 dir="rtl" 到 <html> 就能让 Flexbox 主轴自动翻转，但所有物理方向属性（如 margin-left）不会变——必须改用逻辑属性才能真正自适应。
为什么 dir="rtl" 能影响 flex-direction 但不改 margin-left
浏览器的双向算法（Bidi Algorithm）在 <html dir="rtl"> 下会主动重置 Flex 容器的主轴起点：默认 flex-direction: row 的“起始”从左变成右，justify-content: flex-start 自然就对齐到右侧。这不是 CSS 计算出来的，是渲染引擎底层行为。
但 margin-left 这类物理属性永远绑定屏幕左侧，它不参与 Bidi 算法——无论 dir 是什么值，margin-left: 20px 永远往屏幕左边推 20px。
- 想让外边距随文本方向翻转，必须用
margin-inline-start -
padding-right→ 改为padding-inline-end -
float: left→ 改为float: inline-start（Safari 15.4+ 才稳，旧版仍需[dir="rtl"] { float: right; }）
justify-content 和 align-items 在 RTL 下的行为变化
它们的值含义不变，但“主轴”和“交叉轴”的物理指向变了。关键不是记“左/右”，而是盯住 flex-direction：
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row（默认）→ 主轴水平，RTL 下justify-content: flex-start= 对齐到右，align-items: center仍是垂直居中 -
flex-direction: column→ 主轴垂直，RTL 不影响上下顺序，justify-content: flex-start还是顶对齐 - 别写
justify-content: left——这个值无效，CSS 标准里没有 left/right 作为justify-content的取值
常见翻车点：嵌套 Flex 容器 + RTL
外层 <html dir="rtl"> 只影响直接子 Flex 容器的主轴起点；如果某子容器自己写了 flex-direction: row-reverse，它会叠加翻转，导致方向错乱。
- 避免手动加
row-reverse或column-reverse，让dir自动驱动 - 子容器若需独立方向控制（比如某个卡片内图标必须右对齐），优先用
margin-inline-end或text-align: end，而不是硬调flex-direction - 调试时用浏览器开发者工具检查 computed styles，确认
flex-direction是否真被 Bidi 触发为row（不是row-reverse）
逻辑属性现在能放心用吗？
Chrome 120+、Firefox 125+、Safari 15.4+ 已稳定支持 margin-inline-start、inset-block-start、text-align: start 等。PostCSS 插件可自动补全 margin-left / margin-right fallback。
但注意：float: inline-start 在 Safari 15.4 之前不可靠，旧项目仍得保留降级规则；text-align: start 可以替代 text-align: left，且已无兼容性风险。
最易被忽略的是表单控件内部——<select> 箭头、<input type="search"> 清除按钮的位置由 dir 自动控制，你不用写任何 CSS，但很多人误以为要手动调整，反而破坏了原生行为。
