顺序 - 弹性盒子与网格 - Tailwind CSS 中文文档

顺序

用于控制弹性盒子和网格项顺序的工具。

Class Styles

Class	Styles
`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，以不同于它们在文档中出现的顺序渲染弹性盒子和网格项：

<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 工具将弹性盒子和网格项渲染为第一或最后：

<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>

使用自定义值

Use the order-[<value>] syntax to set the order based on a completely custom value:

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

For CSS variables, you can also use the order-(<custom-property>) syntax:

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

This is just a shorthand for order-[var(<custom-property>)] that adds the var() function for you automatically.

响应式设计

Prefix an order utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

顺序

目录