Tailwind CSS と Flexbox および Grid レイアウト

Tailwind CSS は、特に Flexbox と Grid のレイアウトを管理するための強力なユーティリティクラスを提供しています。

Flexbox と Grid のこれらのユーティリティクラスにより、カスタム CSS を書くことなく、レスポンシブで柔軟なレイアウトを非常に効率的に作成できます。

Tailwind CSS の理念は、低レベルのユーティリティクラス（utility-first）でレイアウトを制御し、クラスを柔軟に組み合わせてさまざまなデザイン要件を満たすことです。

1、Flexbox レイアウト

Flexbox は、開発者が一次元（水平または垂直）のレイアウトを作成するのに役立つレイアウトモードです。

Tailwind CSS は、方向、整列、伸縮など、Flexbox レイアウトのさまざまな側面を制御するための簡潔なユーティリティクラスを多数提供しています。

Flex コンテナの設定

Flexbox レイアウトを作成するには、まず要素を flex コンテナに設定する必要があります。

flex は要素の display を flex に設定し、Flexbox レイアウトを有効にします。

flex アイテムの初期サイズのユーティリティクラスと、対応する CSS プロパティ：

Flex の方向

flex-direction は主軸の方向（つまり Flex コンテナ内のアイテムが並ぶ方向）を制御します。

Tailwind は方向を設定するための以下のユーティリティクラスを提供しています：

• flex-row: デフォルト値で、子アイテムは水平方向に左から右へ並びます。
• flex-row-reverse: 子アイテムは水平方向に右から左へ並びます。
• flex-col: 子アイテムは垂直方向に上から下へ並びます。
• flex-col-reverse: 子アイテムは垂直方向に下から上へ並びます。

Flex ラップ（Flex Wrap）

デフォルトでは、Flexbox コンテナ内のアイテムは単一の行に配置されます。

それらを折り返したい場合は、flex-wrap ユーティリティクラスを使用できます。

• flex-wrap: アイテムの折り返しを許可します。
• flex-nowrap: アイテムの折り返しを禁止します。
• flex-wrap-reverse: 逆方向に折り返します。

Flex アイテムの伸縮性

Flexbox は、利用可能なスペースに応じて要素のサイズを伸縮させることを可能にします。

Tailwind CSS は伸縮を制御するための以下のユーティリティクラスを提供しています：

flex-grow プロパティ

以下は、flex アイテムの flex-grow プロパティを制御するユーティリティクラスと、対応する CSS プロパティです：

flex-shrink プロパティ

以下は、flex アイテムの flex-shrink プロパティを制御するユーティリティクラスと、対応する CSS プロパティです：

並べ替え

以下は、flex アイテムまたは grid アイテムの並び順を制御するユーティリティクラスと、対応する CSS プロパティです：

Grid（グリッド）レイアウト

Grid はもう1つのレイアウトモデルで、行と列で要素を正確に配置でき、複雑なレイアウトを簡単に作成できます。

Tailwind CSS は、グリッドレイアウトを操作するための強力なユーティリティクラスを提供します。

以下は、Tailwind CSS でグリッドレイアウトの列数を指定するためのユーティリティクラスと、対応する CSS プロパティです：

• grid: Grid レイアウトを有効にします。
• grid-cols-{n}: グリッドの列数を設定します。
• gap-{size}: 列と行の間隔を設定します。

Grid の行と列

を使用してgrid-template-columnsとgrid-template-rows列と行の幅と高さを制御します。Tailwind は以下のユーティリティクラスを提供します：

• grid-cols-{n}: グリッドの列数を設定します（例：grid-cols-33列を表します）。
• grid-rows-{n}: グリッドの行数を設定します（例：grid-rows-22行を表します）。
• col-span-{n}: 1つのアイテムが占める列数を設定します。
• row-span-{n}: 1つのアイテムが占める行数を設定します。

Grid アイテムの配置

grid-column と grid-row は、各アイテムのグリッド内の位置を制御します。

次のユーティリティクラスを使用して指定できます：

• col-start-{n}: アイテムを n 列目から開始するように設定します。
• col-end-{n}: アイテムを n 列目で終了するように設定します。
• row-start-{n}: アイテムを n 行目から開始するように設定します。
• row-end-{n}: アイテムを n 行目で終了するように設定します。

整列と分布

Flexbox と同様に、Grid にも整列と分布のオプションが用意されています。

justify-content プロパティは、コンテナ内の子要素を主軸（水平方向）に沿って整列させるために使用されます。

その他の整列設定：

• justify-items: グリッドセルの内容の整列方法を制御します。
• justify-self: 単一のグリッドアイテムの整列方法を制御します。
• align-items: グリッドセルの垂直方向の整列方法を制御します。
• align-self: 単一のグリッドアイテムの垂直方向の整列方法を制御します。