Flex 项目排序
像 Flexbox 和 Grid 这样的布局方法可以控制内容的顺序。在本文中，我们将探讨在使用 Flexbox 时更改内容视觉顺序的方法。我们还将考虑重新排序项目如何影响无障碍性。
反转项目的显示顺序
flex-direction 属性可以取四个值之一
rowcolumnrow-reversecolumn-reverse
前两个值使项目保持与文档源代码顺序相同的顺序，并从起始行开始依次显示它们。
后两个值通过切换起始行和结束行来反转项目。
请记住，起始行与书写模式相关。上面与行相关的示例演示了 row 和 row-reverse 在英语等从左到右的语言中如何工作。如果您使用的是阿拉伯语等从右到左的语言，则 row 将从右侧开始，row-reverse 从左侧开始。
这似乎是反向显示内容的一种简单方法。但是，您应该注意，项目只是视觉上以反向顺序显示。Flex 布局的重新排序功能仅影响视觉呈现。选项卡顺序和语音顺序遵循源代码的顺序。这意味着只有视觉呈现发生变化；源顺序保持不变，为非 CSS UA（例如 Siri 或 Alexa）和辅助技术用户提供不同的用户体验。如果您更改导航栏的顺序，选项卡顺序仍然是文档源代码顺序，而不是您的视觉顺序，这可能会造成认知上的混淆。
如果您正在使用反向值或以其他方式重新排序项目，则应考虑是否确实应该在源代码中更改逻辑顺序。
弹性盒子布局规范警告我们不要将重新排序作为解决源代码问题的方法
"作者不得使用
flex-flow/flex-direction的 order 或 *-reverse 值来代替正确的源代码顺序，因为这可能会破坏文档的无障碍性。"
当您在下面的实时示例中从一个链接跳到另一个链接时，焦点样式会突出显示，这表明使用 flex-direction 更改弹性项目的顺序不会更改选项卡顺序，选项卡顺序将继续遵循源代码顺序。
与更改 flex-direction 的值不会更改选项卡顺序相同，更改此值也不会更改绘制顺序。它仅是项目的视觉反转。
order 属性
除了反转弹性项目视觉显示的顺序之外，您还可以定位各个项目并使用 order 属性更改它们在视觉顺序中的显示位置。
order 属性旨在按序数组布局项目。这意味着为项目分配一个表示其组的整数。然后，根据该整数按视觉顺序放置项目，值越低越先放置。如果多个项目具有相同的整数值，则在该组内，项目将按源代码顺序布局。
例如，五个弹性项目被分配了如下 order 值
- 源项目 1：
order: 2 - 源项目 2：
order: 3 - 源项目 3：
order: 1 - 源项目 4：
order: 3 - 源项目 5：
order: 1
这些项目将在页面上按以下顺序显示
- 源项目 3：
order: 1 - 源项目 5：
order: 1 - 源项目 1：
order: 2 - 源项目 2：
order: 3 - 源项目 4：
order: 3
在下面的实时示例中尝试更改这些值，并查看这些更改如何影响顺序。此外，尝试将 flex-direction 更改为 row-reverse 并查看会发生什么——起始行将被切换，因此排序将从相反的一侧开始。
弹性项目的默认 order 值为 0。因此，整数值大于 0 的项目将显示在任何未指定显式 order 值的项目之后。
您也可以对 order 使用负值，这非常有用。如果您希望使一个项目首先显示并保持所有其他项目的顺序不变，则可以为该项目指定 -1 的 order。由于这低于 0，因此该项目将始终首先显示。
在下面的实时代码示例中，项目使用 Flexbox 进行布局。通过在 HTML 中更改为哪个项目分配了 active 类，您可以更改哪个项目首先显示，从而在布局顶部变为全宽，其他项目显示在其下方。
项目按顺序修改的文档顺序显示，这意味着在显示项目之前会考虑 order 属性的值。
order 属性还会改变项目的绘制顺序；order 值较低的项目先绘制，order 值较高的项目后绘制。
order 属性和无障碍
使用 order 属性对可访问性的影响与使用 flex-direction 改变方向的影响相同。使用 order 会改变项目绘制的顺序以及它们在视觉上出现的顺序。它不会改变项目的顺序导航顺序。因此，如果用户使用键盘在页面上切换内容，他们可能会发现自己以非常混乱的方式跳跃浏览你的内容。
通过切换此页面上的任何实时示例，您可以了解 order 如何可能为任何不使用鼠标等指向设备的用户带来奇怪的体验。要详细了解这种视觉顺序和逻辑顺序之间的脱节以及它引起的一些潜在的可访问性问题，请参阅以下资源。
- Flexbox 和键盘导航脱节，来自 tink.uk (2016)
- HTML 源代码顺序与 CSS 显示顺序，来自 adrianroselli.com (2015)
- 键盘焦点响应式顺序冲突，来自 alastairc.uk (2017)
order 的用例
在某些用例中，弹性盒项目的逻辑顺序（因此也是阅读顺序）与视觉顺序分离的事实是有帮助的。order 属性使用得当，可以轻松实现一些有用的常见模式。
你可能有一个设计，例如一个显示新闻项目的卡片。新闻项目的标题是最重要的内容，如果用户在标题之间切换以查找他们想要阅读的内容，它将是用户可能跳转到的元素。卡片还有一个日期；我们想要创建的最终设计如下所示。
在视觉上，日期出现在标题上方，在源代码中也是如此。但是，如果卡片由屏幕阅读器读出，我更希望标题先被宣布，然后是发布时间。我们可以使用 order 属性来实现这一点。
卡片是我们的弹性容器，flex-direction 设置为 column。我们为日期设置 order 为 -1，将其放置在标题上方。
这些微小的调整是 order 属性有意义的用例。保持逻辑顺序与文档的阅读和选项卡顺序相同，并以最易访问和结构化的方式维护它。然后使用 order 进行纯粹的视觉设计调整。不要重新排序接收键盘焦点的项目。确保始终仅使用键盘而不是鼠标或触摸屏测试你的内容；这将揭示你的开发选择是否使内容导航变得更加复杂。