使用 HTML dir 设置文本的基本方向，使用 CSS flex-direction: row-reverse 反转 flex 行的流向。在 Mac 上为公开页面排列卡片时，先确定你需要改变的是文本方向、项目顺序还是对齐方式。

本指南假设你正在文本编辑器中编辑页面的 HTML 和 CSS，并在桌面浏览器中预览。任务是排列三个中性方块——Alpha、Beta 和 Gamma——同时确保文本行为和文档顺序符合预期。

每种方向设置实际会改变什么？

HTML 的 dir 属性描述元素文本的基本方向。其明确取值为 ltr 和 rtl；auto 则要求浏览器根据内容判断方向。WHATWG 鼓励作者通过 HTML 表达文本方向，这样即使没有 CSS，这些信息也仍然可用。HTML 标准：dir 属性。

CSS direction 也控制文本的基本方向，并会影响布局行为。它会继承，因此在容器上设置 direction: rtl 可能影响其后代。MDN 建议尽可能使用 HTML dir。应将 CSS 方向覆盖视为有意设定文本方向，而不是移动方框的便捷方法。MDN：direction。

CSS flex-direction 控制 flex 容器的主轴。row 遵循当前书写模式的行内轴；row-reverse 则交换主轴起点和终点的方向。它会改变项目的布局方向，同时保留项目在源代码中的顺序。W3C：Flex 流向。

这些机制会相互作用。在水平书写模式下，ltr flex 行从左侧开始，而 rtl flex 行从右侧开始。添加 row-reverse 会反转任一开始方向。因此，row-reverse 并不总意味着第一项会出现在右侧。MDN：flex-direction。

哪种设置符合你的预期结果？

编辑前，先用具体语言写下想要的结果：“英文标签保持不变，方块的视觉顺序反转，整组仍靠右。”这句话分别指出了文本、项目流向和对齐方式方面的决定。

预期结果 合适的起点 检查事项
设置内容的基本文本方向 HTML dir="ltr" 或 dir="rtl" 将其应用于文本需要此方向的范围。
反转 flex 行中所有项目的视觉排列顺序 flex-direction: row-reverse 先检查容器当前的方向。
将顺序不变的行移至主轴终点一侧 justify-content: flex-end 确保有可用于对齐的空余空间。
在所有地方更改实际顺序 重新排列源代码中的元素 确认生成的阅读顺序合理。
在视觉上重新放置指定项目 单个项目的 order 值 检查视觉顺序与源代码顺序之间的差异。

反转与对齐之间的区别很重要。对于 ltr 行，justify-content: flex-end 可以将 Alpha、Beta 和 Gamma 一起放到右侧，同时不反转其顺序。对齐会分配主轴上的可用空间；flex-end 指 flex 容器主轴的终点一侧。如果弹性项目占用了这些空间，对齐效果可能会消失。MDN：justify-content。

如果读者必须按特定顺序阅读项目，就应在文档本身中确定该顺序。W3C 明确提醒，不要使用 flex 反转或 order 来弥补源代码顺序错误。W3C：排序与方向。

更改页面前，先预测四种组合

以下比较是根据文档所述的轴规则推导而来。假设 writing-mode: horizontal-tb、只有一条 flex 行、所有 order 值相等，且源代码顺序为 Alpha、Beta、Gamma。“从左到右的显示顺序”描述的是方块在屏幕上的物理位置。

容器方向 Flex 方向 第一项从何处开始 从左到右的显示顺序
ltr row 左侧 Alpha、Beta、Gamma
ltr row-reverse 右侧 Gamma、Beta、Alpha
rtl row 右侧 Gamma、Beta、Alpha
rtl row-reverse 左侧 Alpha、Beta、Gamma

当内容只是简单矩形时，第二行和第三行看起来可能相同。不过，它们的文本方向设置不同。第四种组合解释了一种常见的意外情况：同时应用 rtl 和 row-reverse 会产生从左到右的项目流向。MDN 记录了这种依赖方向的行为。MDN：flex-direction。

文本的基本方向也会影响标点以及有方向性的文本片段的排序。设置 rtl 并不会简单地反转英文单词中的每个字符。标签可能仍然清晰可辨，但标点可能出现在意料之外的位置。因此，纯方块适合检查方框的位置，却不足以评估文本行为。MDN：dir 使用说明。

在 Mac 上试用完整的对比页面

使用纯文本编辑器将下面的完整文档保存为 direction-demo.html，然后在浏览器中打开该文件。页面使用合成标签和 CSS 矩形，不依赖外部资源。预期结果依据文档中的规则推导；此示例并非经过浏览器测试的结果。

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direction and flex comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 24px;
      color: #202020;
      background: #fff;
    }
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      writing-mode: horizontal-tb;
      justify-content: flex-start;
      gap: 12px;
      max-width: 448px;
      padding: 12px;
      border: 1px solid #777;
      margin-bottom: 20px;
    }
    .reverse { flex-direction: row-reverse; }
    .tile {
      flex: 0 0 64px;
      padding: 16px 0;
      text-align: center;
      background: #e2ecf4;
    }
  </style>
</head>
<body>
  <h1>Direction and flex comparison</h1>
  <p>LTR with row</p>
  <div class="row" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>LTR with row-reverse</p>
  <div class="row reverse" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row</p>
  <div class="row" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row-reverse</p>
  <div class="row reverse" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
</body>
</html>

将四行与预测表进行比较。它们的源代码顺序完全相同，区别仅在于容器方向和反转类。显式指定水平书写模式，可以让演示专注于常见的桌面水平布局。

接着，只将 justify-content: flex-start 改为 justify-content: flex-end，保存并重新加载。各组应移至主轴上相反的一侧，同时保留每行的项目流向。这样就能在不引入另一个文本方向设置的情况下，区分位置调整和顺序反转。MDN：justify-content。

最后，恢复对齐设置，并在每行的 Alpha 后添加句点。比较标点和方块位置。这是用于探查文本方向的示例，并非建议对普通英文标签指定 rtl。MDN 对基本方向的说明解释了为什么边界标点需要单独检查。MDN：dir。

排查实际布局中的意外结果

确认父元素是 flex 容器

检查包含方块的元素。只有当其 display 为 flex 或 inline-flex 时，flex-direction 才会生效。应用在普通块级容器上的声明不会建立 flex 布局。还要检查是否有后续规则在浏览器当前宽度下改变了生效值。MDN：flex-direction 说明。

添加另一次反转前，先检查继承的方向

检查容器及其祖先是否设置了 dir，然后再检查 CSS direction 声明。如果省略 dir，方向通常会从父元素继承；省略它并不表示要求自动检测。如果源代码中的顺序意外地从右侧开始，继承的方向可能就是原因。MDN：dir 继承。

不要将 dir="auto" 用作布局开关。WHATWG 将其定义为基于内容的方向检测，主要依据第一个强方向性字符，并建议仅在文本方向确实未知时使用。布局需求不应取决于哪个标签恰好先出现。HTML 标准：dir 属性。

区分项目反转与行反转

如果问题只在缩窄窗口后出现，请检查换行行为。row-reverse 会改变主轴上的排列顺序；wrap-reverse 会改变 flex 行堆叠的方向。默认的 nowrap 保持单行，并可能导致溢出。这是两个独立的控制项，因此除了初始桌面宽度外，也要在窄窗口中测试。MDN：flex-wrap。

检查单个项目的排序规则

检查是否有任何方块设置了 order 值。Flex 布局会按整数值从小到大对项目分组，并在值相同的组内保留源代码顺序。之后进行反转时，会从另一端开始排列这一结果序列。在认定容器方向有误之前，先重置意外的项目级排序。MDN：排序 flex 项目。

保留更改前，检查阅读顺序

对于中性的装饰方块，视觉反转可能就是全部需求。对于链接或控件，请检查源代码中的顺序，并在组件中逐项检查键盘焦点。Flex 反转本身不会改变顺序导航或语音朗读顺序。因此，视觉上反转的一组项目仍可能保留原有的交互顺序。W3C：Flex 流向。

通过这项检查来决定是否应更改源代码。如果预期的实际顺序是 Gamma、Beta、Alpha，就按此顺序放置元素。如果 Alpha、Beta、Gamma 仍是正确的阅读顺序，只是展示方式需要反转，就要在明确区分两者的前提下评估视觉排列。MDN 用可聚焦链接演示了源代码顺序的行为。MDN：排序 flex 项目。

根据需求选择机制：使用 HTML dir 设置文本的基本方向，使用 flex-direction 设置 flex 轴的流向，并使用对齐方式调整顺序不变的项目。保留结果前，分别比较方块位置、标点、换行和源代码顺序。这样，当布局看起来只是被反转时，你就有一套可重复的排查方法。

来源