Flex项排序 - CSS（层叠样式表） 编辑

Flexbox 和 Grid 等新的布局方法为内容的顺序控制提供了可能。 在本文中，我们将介绍使用 Flexbox 时如何更改内容的视觉顺序。 我们还将从可访问性的角度考虑重新排序项目的影响。

反转项目的显示

flex-direction 属性有如下四个值:

• row
• column
• row-reverse
• column-reverse

前两个值使项目保持与它们在文档源顺序中出现的顺序相同，并从起始行开始顺序显示它们。

后两个值通过调换开始和结束行来进行项目的反转。

请记住，起始行与写入模式有关。 上面两个示例说明了 row 和 row-reverse 在从左到右的语言是怎么工作的如英语。如果您使用的是右到左的语言，如阿拉伯语，则 row 的起始行将在右边， row-reverse 起始行会在左边。

这看起来似乎是一种以相反顺序显示事物的简洁方式，但是您应该注意，这些项目只以相反顺序显示。 在这个问题上，规范说明如下:

“注意：Flex布局的重新排序功能仅会影响视觉渲染，保留语音顺序和基于源顺序的导航。 这使作者能够操纵视觉呈现，同时保持非CSS UA和线性模型（例如语音和顺序导航）的原始顺序不变。” - Ordering and Orientation

如果你的项目是链接或者用户可以选择的其他元素，那么选项卡的顺序就是这些项目在文档源中出现的顺序，而不是你的视觉顺序。

如果使用反向值或以其他方式重新排序项，则应考虑是否实际需要更改源中的逻辑顺序。 该规范继续警告不要使用重新排序来修复源代码中的问题:

“作者不得使用flex-flow / flex-direction的顺序或反向值来代替正确的源顺序，因为这会破坏文档的可访问性。”

注意: 近几年来，Firefox出现了一个错误，即它会尝试遵循视​​觉顺序而不是源顺序，从而使其行为与其他浏览器不同。 现在，此问题已得到解决。 您应始终将源顺序作为文档的逻辑顺序，因为所有最新的用户代理都将遵循该规范并遵循该规范。

在下面的实时示例中，我添加了一种焦点样式，以便当您从一个链接到另一个标签时，可以看到突出显示的样式。 如果使用flex-direction更改顺序，则可以看到制表符顺序如何继续遵循源中列出的项目的顺序。

与更改flex-direction的值不会更改项目导航到的顺序相同，更改此值不会更改绘制顺序。 它仅是项目的视觉反转。

order 属性

除了颠倒显示弹性项目的顺序之外，您还可以使用order 属性指定单个项目并更改其在视觉顺序中的显示位置。.

order属性旨在按顺序排列项目。 这意味着为项目分配了代表其组的整数。 然后，按照该整数（最低的值）首先按照视觉顺序放置项目。 如果多个项目具有相同的整数值，则在该组中按照源顺序对项目进行布局。

例如，我有5个弹性条目，并按如下所示分配order值：

• Source item 1: order: 2
• Source item 2: order: 3
• Source item 3: order: 1
• Source item 4: order: 3
• Source item 5: order: 1

这些项目将按以下顺序显示在页面上：

• Source item 3: order: 1
• Source item 5: order: 1
• Source item 1: order: 2
• Source item 2: order: 3
• Source item 4: order: 3

您可以在下面的实时示例中使用这些值，并查看如何更改顺序。 另外，尝试将flex-direction更改为row-reverse，看看会发生什么—切换了起始行，以便从相反的一侧开始排序。

弹性项目默认 order 值为 0, 因此整数值大于 0 的项目，将会显示在那些未指定 order 值的项目之后。

您还可以按顺序使用负值，这很有用。 如果要先显示一个项目，并保持所有其他项目的顺序不变，则可以将该项目的顺序设为-1。 由于该值小于0，因此始终会首先显示该项目。

在下面的实时代码示例中，我使用Flexbox布置了项目。 通过更改在HTML中为其分配了类active，您可以更改首先显示的项目，您可以更改首先显示哪个项目，因此在布局顶部变为全宽，而在其下方显示其他项目。

这些项目以规范中描述的顺序修改的文档顺序显示。 在显示项目之前，将考虑order属性的值。

Order 还会更改项目的绘制顺序; 对于order较低的项目将首先绘制，对于order值较高的项目将随后绘制。