Flexbox и Grid
Утилиты для управления порядком 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 элементов в порядке, отличном от их появления в документе:
<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().
Префикс an order утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="order-first md:order-last ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.