order

Ví dụ

Đặt thứ tự sắp xếp rõ ràng

Sử dụng các tiện ích order-<number> như order-1 và order-3 để hiển thị các mục flex và grid theo thứ tự khác với thứ tự xuất hiện trong tài liệu:

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

Sắp xếp mục đầu tiên hoặc cuối cùng

Sử dụng các tiện ích order-first và order-last để hiển thị các mục flex và grid đầu tiên hoặc cuối cùng:

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

Sử dụng giá trị âm

Để sử dụng giá trị order âm, thêm dấu gạch ngang trước tên class để chuyển nó thành giá trị âm:

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

Sử dụng giá trị tùy chỉnh

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.

Responsive design

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.