この記事では、Tailwind CSS でフレックス項目とグリッド項目を並べ替える方法を説明します。
Tailwind でフレックスおよびグリッド項目を注文するにはどうすればよいですか?
Tailwind CSS でフレックス項目とグリッド項目を順序付けするには、HTML ファイルを作成します。次に、「order-」ユーティリティを使用して HTML プログラムで順序値を指定し、フレックス項目とグリッド項目の順序を変更します。これにより、フレックス項目を DOM (ドキュメント オブジェクト モデル) に表示される順序とは異なる順序でレンダリングできます。変更を確認するには、HTML Web ページを表示してください。
理解を深めるために、指定された手順を参照してください。
ステップ 1: HTML プログラムでフレックスおよびグリッド項目を注文する
HTMLプログラムを作成し、「 order-<値> 」ユーティリティを使用して、フレックス項目またはグリッド項目の順序値を指定します。たとえば、「order-3」、「order-last」、「order-first」、および「order-2」ユーティリティを使用しました。
< 体 >
< ディビジョン クラス = 「フレックスH-20」 >
< ディビジョン クラス = 「order-3 bg-red-500 w-32 m-1」 > 1 < / ディビジョン >
< ディビジョン クラス = 「order-last bg- yellow-500 w-32 m-1」 > 2 < / ディビジョン >
< ディビジョン クラス = 「order-first bg-teal-500 w-32 m-1」 > 3 < / ディビジョン >
< ディビジョン クラス = 「order-2 bg-orange-500 w-32 m-1」 > 4 < / ディビジョン >
< / ディビジョン >
< / 体 >
ここ：
- 「 注文-3 」クラスは要素の順序を 3 に設定し、フレックス項目はフレックス コンテナ内の 3 番目の項目として配置されます。
- 「 最後の注文 」クラスは要素の順序を最後に設定し、それがフレックスコンテナ内の最後の項目になります。
- 「 注文優先 ” クラスは、要素が最初になる順序を指定し、フレックス コンテナ内の最初の項目として配置されます。
- 「 注文-2 ” クラスは要素の順序を 2 に設定し、フレックス コンテナ内の 2 番目の項目として配置されます。
- 「 w-32 」クラスは、各フレックス項目に 32 単位の幅を適用します。
- 「 m-1 」クラスは、各フレックス項目の周囲に 1 単位のマージンを追加します。
ステップ 2: 出力を確認する
HTML Web ページを表示して、フレックス項目とグリッド項目が順序付けされていることを確認します。
フレックス項目とグリッド項目が、指定された内容に従って正常に順序付けされていることがわかります。
結論
Tailwind CSS でフレックス項目とグリッド項目を注文するには、「 order-<値> 」ユーティリティを使用して、HTML プログラム内のフレックス項目とグリッド項目の順序値を指定します。 Web ページ上のフレックス項目とグリッド項目を再配置します。確認するには、HTML Web ページ上の変更を表示し、変更が行われていることを確認します。この記事では、Tailwind CSS でフレックス項目とグリッド項目を並べ替える方法を説明しました。