TailWindCSS | justify-*, items-*, justify-items-* の使い分け

Tailwind CSS の justify- と items- は、適用される CSS プロパティが異なります。

1. justify- 系 (justify-items-* / justify-content-*)

→ 主に「横方向（メイン軸）」の配置を制御

• justify-content-* → Flexbox (flex), Grid のコンテンツの配置
• justify-items-* → Grid の各アイテムの配置

ポイント：

• justify-content-* は flex または grid コンテナの内部のアイテム全体の配置を決める
• justify-items-* は Grid の各アイテムの配置を制御（flex では使えない）

2. items- 系 (align-items-*)

→ 主に「縦方向（交差軸）」の配置を制御

• align-items-* → Flexbox, Grid でアイテムの縦方向の整列

ポイント：

• items-* は align-items のショートカットであり、縦方向の揃え方を指定
• flex でも grid でも使える

3. content- 系 (align-content-*)

→ Flexbox で複数行がある場合の「縦方向」の制御

ポイント：

• align-items-* は各行のアイテムの配置
• align-content-* は複数行の全体配置（1行なら意味なし）

4. 使い分けの例

Flexbox の例

<div className="flex h-32 items-center justify-center bg-gray-200">
  <div className="bg-blue-500 p-2 text-white">中央揃え</div>
</div>

• justify-center → **横方向（メイン軸）**で中央揃え
• items-center → **縦方向（交差軸）**で中央揃え
  

Grid の例

<div className="grid h-32 grid-cols-3 items-center justify-items-center bg-gray-200">
  <div className="bg-blue-500 p-2 text-white">アイテム1</div>
  <div className="bg-blue-500 p-2 text-white">アイテム2</div>
  <div className="bg-blue-500 p-2 text-white">アイテム3</div>
</div>

• justify-items-center → 各アイテムの横方向の位置を中央に
• items-center → 各アイテムの縦方向の位置を中央に
  

まとめ

基本的には、

• justify-* → 横方向の揃え方
• items-* → 縦方向の揃え方
• justify-items-* → Grid で個々のアイテムの横揃え

と考えると整理しやすいです。