我们针对布局方法按与文档来源无关的顺序排列项的问题提出了一项解决方案，希望您就此提供反馈。
CSS 工作组正在努力解决以下问题：布局方法可能会以与来源（因此与文档的阅读和焦点顺序）无关的顺序排列项。本文介绍了该问题和建议的解决方案，我们非常期待收到您的反馈。
问题
HTML 文档的阅读顺序遵循源代码顺序。这意味着，屏幕阅读器会按照源代码中的排版方式读取文档，使用键盘在文档中跳转的用户也会遵循该源代码顺序。通常，这很有意义，并且文档的合理源代码顺序对于内容的阅读模式呈现、屏幕阅读器以及 CSS 受限的任何设备都至关重要。不过，CSS（尤其是 Flexbox 和 Grid）可以创建布局，其中布局定义的视觉阅读顺序与底层来源不同。
例如，在 Flex 项上使用 order 属性会更改布局顺序，但不会更改来源中的顺序。
使用网格布局时，所选布局方法可能会混乱标签页顺序，例如，使用 grid-auto-flow: dense 时，系统会创建随机的项布局顺序。
开发者还可能会导致这种断开连接，方法是将网格上的项按与源代码中规定的顺序不同的顺序放置。
建议的解决方案
CSS 工作组正在提出一项解决方案，非常期待开发者和无障碍社区就此方法提供反馈。
使用 reading-order: auto 遵循随机布局
在创建随机布局顺序的情况下（例如在网格布局中使用紧密排列时），您可能希望浏览器遵循布局，而不是来源顺序。要实现这种效果，Flex 或网格项需要具有 reading-order 属性，且值为 auto。
以下 CSS 会导致阅读顺序遵循因 grid-auto-flow: dense 而紧密排列的项的放置。
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
使用 reading-order-items 遵循非随机布局
在某些网格布局和 Flex 布局中，布局顺序很容易理解。例如，在使用 order 属性重新排列项的 Flex 布局中，order 属性会决定明显的布局顺序。在其他布局中，理想的布局顺序不太明确，可能有多个可能的选择。因此，如果采用非随机布局，您需要向容器添加 grid-order-items 属性，并使用关键字值说明您对布局顺序的预期。
以下示例展示了使用 row-reverse 的 Flex 布局。Flex 项具有 reading-order: auto，Flex 容器具有 reading-order-items: flex flow，这表示我们还希望阅读顺序也遵循 flex-flow 方向，而不是遵循视觉顺序（我们可以使用 flex visual 指明）。
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
在下一个示例中，使用 grid-template-areas 创建了网格布局，并且项的布局顺序与来源顺序不同。reading-order-items 属性用于指明我们应遵循布局顺序，先遍历每一行，然后再前进到下一行。（grid column 表示相反方向）。
.wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"a a b b b b"
"c c d d e e"
"f f g g h h";
reading-order-items: grid rows;
}
.a {
grid-area: a;
reading-order: auto;
}
这是否意味着来源顺序无关紧要？
不可以，来源顺序仍然很重要。此功能仅应在阅读顺序可能与来源不同的特定情况下使用。例如，使用可能会导致这种断开连接的布局方法（例如密集网格填充），或者在某个断点处使用不同的布局顺序。
使用这些属性时，请使用在没有 CSS 的情况下呈现网页时有意义的顺序创建源文档。请仅在需要这些属性的位置和断点处添加这些属性。
制作工具是否应应用这些属性？
允许用户通过拖放元素创建网格布局的创作工具，仍应鼓励用户创建合理的源文档。因此，在大多数情况下，最好根据布局顺序重新排列来源，而不是使用这些属性以一种懒惰的方式处理断开连接。
请分享您对此方案的反馈
我们非常希望收集有关此问题的反馈。特别是，如果您认为此方法无法解决某种用例，或者对此方法的可访问性存有疑虑，请告知 CSS 工作组。
有一个正在进行的会话，其中包含许多有关该方法的用例和想法。您可以在该会话中添加任何评论，并指出此提案可能存在的问题。请注意，当前的方案与发起此会话的初始方案截然不同。感兴趣的用户可能会喜欢阅读促成我们今天取得的成就的所有对话，因为这是一个很好的例子，说明了 CSS 工作组如何处理提案，使其成为可在浏览器中实现的内容。
缩略图图片由 Patrick Tomasso 提供。感谢 Chris Harrelson、Tab Atkins 和 Ian Kilpatrick 提供反馈和审核。