CSS order

此 CSS 属性指定了 grid 容器或 flex 容器中 flex 项目的顺序。它主要用于排序 flex 项目。需要注意的是，如果元素不是 flex 元素，则此属性将不起作用。

元素将按照它们 order 值的递增顺序显示。如果两个元素使用相同的 order 值，则它们将根据它们在源代码中的出现顺序显示。

order 属性会修改 flex 项目的视觉顺序。order 值最低的项目排在最前面，order 值较高的项目排在后面。它只会影响元素的视觉顺序，而不会影响 tab 键或逻辑顺序。它不应用于非视觉媒体，例如语音。

可以为 order 定义负值。当我们需要将一个项目显示在最前面，而保持其他项目顺序不变时，负值很有用。当未指定值时，将使用默认值 0。因此，当我们想将一个项目显示在最前面时，可以为其提供一个负值，例如 -1。由于此负值小于 0，因此相应的项目将始终显示在最前面。

语法

值

order 属性使用整数值来定义项目的顺序。

integer (整数): 用于指定柔性项目的顺序。其默认值为 0。

initial (初始值): 将属性值设置为其默认值。

inherit (继承): 顾名思义，该元素使用其父元素的计算值。

让我们通过一些示例来理解 order 属性。

示例 1

在上面的示例中，我们使用了负值以及一些元素的相同 order 值。具有较小值的元素将首先显示，具有相同 order 值的元素将根据它们在代码中的出现顺序显示。

如上例所示，其中一个 div 元素的 order 值为 -2，那么它将首先显示，然后是 order 值为 -1 的元素，依此类推。

示例 2