Flexbox & Grid
order
用于控制 flex 和 grid 项顺序的工具类。
| 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-1 和 order-3）可以让 flex 和 grid 项目按照与文档中不同的顺序渲染：
01
02
03
<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 项目渲染在首位或末位：
01
02
03
<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.
