CSS - 顺序


CSS 顺序属性

CSS order属性用于指定 Flex 或网格项目在容器中出现的顺序。Flex 或网格项目的顺序由其 order 属性的值确定。顺序值较低的 Flex/Grid 项目将首先显示,顺序值最高的项目将显示在最后。

以下是可用于属性顺序的所有可能值:

  • 整数:表示项目要使用的序数组。
  • 继承:使用与其父级相同的值。
  • 初始:元素使用默认值,即0。
  • unset:元素使用默认值,即 0。

以下是一些需要记住的额外事项:

  • order属性不会被子元素继承。
  • order属性仅影响弹性项目。
  • 容器中的项目按值升序排序。
  • order属性的默认值为0。

CSS 顺序 - 演示

尝试为 CSS order属性选择不同的值,并在右侧框中查看结果。

CSS 顺序 - 整数值

CSS order 属性可以设置为整数值,可以是任何正整数或负整数。正值意味着正序值最高的项目将显示在最后,负值最大的项目将显示在第一个项目。

例子

这是一个例子 -

<html> <head> <style> .flex_container { display: flex; background-color: #0ca14a; height: 90px; } .flex_container div { background-color: #FBFF22; padding: 10px; margin: 10px; height: 50px; text-align: center; } </style> </head> <body> <div class="flex_container"> <div style="order: 2">Item 1</div> <div style="order: 6">Item 2</div> <div style="order: 4">Item 3</div> <div style="order: -1">Item 4</div> <div style="order: 5">Item 6</div> <div style="order: -2">Item 7</div> </div> </body> </html>

CSS 顺序 - 初始值

order :initial value 只是将项目的 order 属性设置回其初始值,通常为 0。

例子

这是一个例子 -

<html> <head> <style> .flex_container { display: flex; background-color: #0ca14a; height: 90px; } .flex_container div { background-color: #FBFF22; padding: 10px; margin: 10px; height: 50px; text-align: center; } </style> </head> <body> <div class="flex_container"> <div style="order: 5">Item 1</div> <div style="order: 3">Item 2</div> <div style="order: 1">Item 3</div> <div style="order: 6">Item 4</div> <div style="order: initial">Item 5</div> <div style="order: 4">Item 6</div> </div> </body> </html>

CSS 顺序 - 未设置值

如果将order属性设置为unset,则 Flex 项目将按照基于 HTML 标记的默认顺序显示。

例子

下面是一个示例,其中 order 属性设置为取消设置为弹性项目第 1 和第 3。然后这些弹性项目的顺序将以默认顺序显示 -

<html> <head> <style> .flex_container { display: flex; background-color: #0ca14a; height: 90px; } .flex_container div { background-color: #FBFF22; padding: 10px; margin: 10px; height: 50px; text-align: center; } </style> </head> <body> <div class="flex_container"> <div style="order: unset">Item 1</div> <div style="order: 4">Item 2</div> <div style="order: unset">Item 3</div> <div style="order: 1">Item 4</div> <div style="order: 3">Item 5</div> <div style="order: 5">Item 6</div> </div> </body> </html>

CSS 顺序 - 恢复值

当我们将order属性设置为revert值时,flex 项目将按照其出现的顺序显示,就像网页未包含任何 CSS 一样。

例子

下面是一个示例,其中 Order 属性设置为恢复第一个和第五个弹性项目。现在,它们将按照 HTML 代码格式化后的顺序显示。

<!DOCTYPE html> <html> <head> <style> .flex_container { display: flex; background-color: #0ca14a; height: 90px; } .flex_container div { background-color: #FBFF22; padding: 10px; margin: 10px; height: 50px; text-align: center; } </style> </head> <body> <div class="flex_container"> <div style="order: revert">Item 2</div> <div style="order: 3">Item 1</div> <div style="order: 1">Item 3</div> <div style="order: 6">Item 4</div> <div style="order: revert">Item 5</div> <div style="order: 4">Item 6</div> </div> </body> </html>