flex-direction: row-reverse可实现左右板块视觉互换，不改变DOM顺序，仅翻转主轴方向，使<aside><main>渲染为“main在左、aside在右”，语义清晰且可控。
直接用 dir="rtl" 会让整个页面 RTL 翻转，但左右板块互换不是翻转，而是明确交换两个区域的视觉位置——比如左栏变右、右栏变左，内容顺序不变。这得靠 CSS 布局控制，不能靠文本方向属性硬翻。
用 Flexbox 的 flex-direction 反向主轴
这是最干净、语义最清晰的方式：保持 HTML 结构不变（比如 <aside> 在前、<main> 在后），仅靠 CSS 控制渲染顺序。
-
display: flex容器下，flex-direction: row-reverse会把子元素从右往左排列，<aside><main>就变成“main 在左、aside 在右” - 注意：
justify-content的flex-start/flex-end含义会随之翻转，建议改用justify-content: flex-end显式对齐右侧（原左栏位置） - 如果用了
order属性手动调序，row-reverse下它的行为仍按 DOM 顺序计算，容易误判，建议避免混用
用 Grid 的列定义反向写法
Grid 更适合固定结构的互换，比如“左 200px / 右自适应”要变成“右 200px / 左自适应”。
- 原写法：
grid-template-columns: 200px 1fr→ 互换后：grid-template-columns: 1fr 200px - 别用
direction: rtl想“自动翻转列序”，它只影响文本流和justify-content，grid-template-columns顺序完全不变 - 若需响应式切换（如小屏堆叠、大屏互换），建议用媒体查询单独重写
grid-template-columns，而不是依赖dir
避免用 float 或 position 硬调位置
老式方案容易失控，尤其当内容高度不一致时。
立即学习“前端免费学习笔记（深入）”；
-
float: right给左栏 +float: left给右栏？会导致文档流塌陷、父容器高度丢失，必须清浮动，维护成本高 -
position: absolute配left/right？脱离流后无法参与高度计算，且响应式下极易错位 - 所有含
left/right的定位或盒模型值，在 RTL 场景下不会自动映射，dir="rtl"对它们毫无作用
真正要“左右互换”，核心是控制布局引擎的排列逻辑，而不是试图用文本方向去撬动块级结构。Flex 的 row-reverse 和 Grid 的列顺序重写，才是可控、可预测、易调试的做法。其他路径要么副作用多，要么根本达不到目的。
