order

order

用于控制 flex 和 grid 项目顺序的实用工具。

类名样式

类名	样式
`order-<number>`	`order: <number>;`
`-order-<number>`	`order: calc(<number> * -1);`
`order-first`	`order: calc(-infinity);`
`order-last`	`order: calc(infinity);`
`order-none`	`order: 0;`
`order-(<custom-property>)`	`order: var(<custom-property>);`
`order-[<value>]`	`order: <value>;`

order-<number>

order: <number>;

-order-<number>

order: calc(<number> * -1);

order-first

order: calc(-infinity);

order-last

order: calc(infinity);

order-none

order: 0;

order-(<custom-property>)

order: var(<custom-property>);

order-[<value>]

order: <value>;

示例

显式设置排序顺序

使用 order-<number> 实用工具，如 order-1 和 order-3，以不同的顺序渲染 flex 和 grid 项目，而不是它们在文档中出现的顺序

<div class="flex justify-between ...">
  <div class="order-3 ...">01</div>
  <div class="order-1 ...">02</div>
  <div class="order-2 ...">03</div>
</div>

将项目排序为第一个或最后一个

使用 order-first 和 order-last 实用工具将 flex 和 grid 项目渲染为第一个或最后一个

<div class="flex justify-between ...">
  <div class="order-last ...">01</div>
  <div class="...">02</div>
  <div class="order-first ...">03</div>
</div>

使用负值

要使用负序数值，请在类名前面加上破折号，将其转换为负值

<div class="-order-1">
  <!-- ... -->
</div>

使用自定义值

使用 order-[<value>] 语法来设置order基于完全自定义的值

<div class="order-[min(var(--total-items),10)] ...">
  <!-- ... -->
</div>

对于 CSS 变量，您还可以使用 order-(<custom-property>) 语法

<div class="order-(--my-order) ...">
  <!-- ... -->
</div>

这只是 order-[var(<custom-property>)] 的简写形式，它会自动为您添加 var() 函数。

响应式设计

前缀一个 order 实用工具与断点变体（如 md:）一起使用，以便仅在中等屏幕尺寸及以上尺寸的应用该实用工具

<div class="order-first md:order-last ...">
  <!-- ... -->
</div>

了解更多关于在变体文档中使用变体的信息。

在此页面