並び順

並び順

Flexboxと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 など）を使用して、Flexboxと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 ユーティリティを使用して、FlexboxとGridアイテムを最初または最後にレンダリングします。

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

負の値の使用

負のorder値を使用するには、クラス名の前にダッシュを付けて負の値に変換します。

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

カスタム値の使用

次の構文を使用します 並び順-[<value>] 構文を設定するには並び順完全にカスタム値に基づいて

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

CSS変数には、以下も使用できます 並び順-(<custom-property>) 構文

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

これは単なるショートハンドです 並び順-[var(<custom-property>)] var() 関数を自動的に追加する。

レスポンシブデザイン

プレフィックスの order ユーティリティ md: のようなブレークポイントバリアントを付けて、ユーティリティを適用する範囲をミディアム画面サイズ以上

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

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。

このページ内