【レイアウトマスターへ】Tailwind CSS Flexbox & Gridレイアウト：Justify Itemsでワンランク上のデザインに

利用方法

クラス名を追加
コンテナ要素に justify-items-* クラスを追加します。
値を選択
以下のいずれかの値を選択します。
- start: アイテムをコンテナの先頭に揃えます。
- end: アイテムをコンテナの末端に揃えます。
- center: アイテムをコンテナの中央に揃えます。
- stretch: アイテムをコンテナの幅いっぱいに広げます。
- space-around: アイテムを互いに等間隔に配置します。
- space-between: アイテムをコンテナの端と端に揃え、アイテム間を等間隔に配置します。
- space-evenly: アイテムをコンテナ全体に等間隔に配置します。

例

<div class="flex justify-items-center">
  <div class="w-20 h-20 bg-gray-200"></div>
  <div class="w-20 h-20 bg-gray-400"></div>
  <div class="w-20 h-20 bg-gray-600"></div>
</div>

上記の例では、justify-items-center クラスを使用して、3つのボックスをコンテナの中央に揃えます。

応答性の制御

特定のブレークポイントでのみアイテムの配置を調整したい場合は、メディアクエリを使用できます。

<div class="flex md:justify-items-between">
  <div class="w-20 h-20 bg-gray-200"></div>
  <div class="w-20 h-20 bg-gray-400"></div>
  <div class="w-20 h-20 bg-gray-600"></div>
</div>

上記の例では、中程度のブレークポイント（md）以降のみ、ボックスをコンテナ間で均等に配置します。

Grid レイアウトとの違い

justify-items プロパティは Flexbox と Grid の両方で使用できますが、Grid レイアウトでは追加の配置オプションが提供されます。たとえば、grid-template-columns プロパティを使用して、列の数を定義し、アイテムを特定の列に配置することができます。

アイテムの配置

横方向に中央揃え

<div class="flex justify-items-center">
  <div class="w-20 h-20 bg-gray-200"></div>
  <div class="w-20 h-20 bg-gray-400"></div>
  <div class="w-20 h-20 bg-gray-600"></div>
</div>

横方向に両端揃え

<div class="flex justify-items-between">
  <div class="w-20 h-20 bg-gray-200"></div>
  <div class="w-20 h-20 bg-gray-400"></div>
  <div class="w-20 h-20 bg-gray-600"></div>
</div>

縦方向に中央揃え

<div class="flex-col justify-items-center">
  <div class="w-20 h-20 bg-gray-200"></div>
  <div class="w-20 h-20 bg-gray-400"></div>
  <div class="w-20 h-20 bg-gray-600"></div>
</div>

縦方向に両端揃え

<div class="flex-col justify-items-stretch">
  <div class="w-20 h-20 bg-gray-200"></div>
  <div class="w-20 h-20 bg-gray-400"></div>
  <div class="w-20 h-20 bg-gray-600"></div>
</div>

アイテムを等間隔に配置

<div class="flex justify-items-around">
  <div class="w-20 h-20 bg-gray-200"></div>
  <div class="w-20 h-20 bg-gray-400"></div>
  <div class="w-20 h-20 bg-gray-600"></div>
</div>

アイテムを両端に寄せ、等間隔に配置

<div class="flex justify-items-between">
  <div class="w-20 h-20 bg-gray-200"></div>
  <div class="w-20 h-20 bg-gray-400"></div>
  <div class="w-20 h-20 bg-gray-600"></div>
</div>

列を等幅に設定し、アイテムを中央揃え

<div class="grid grid-cols-3 justify-items-center">
  <div class="w-20 h-20 bg-gray-200"></div>
  <div class="w-20 h-20 bg-gray-400"></div>
  <div class="w-20 h-20 bg-gray-600"></div>
</div>

行を等高に設定し、アイテムを両端揃え

<div class="grid grid-rows-3 justify-items-stretch">
  <div class="w-20 h-20 bg-gray-200"></div>
  <div class="w-20 h-20 bg-gray-400"></div>
  <div class="w-20 h-20 bg-gray-600"></div>
</div>

<div class="flex md:justify-items-between">
  <div class="w-20 h-20 bg-gray-200"></div>
  <div class="w-20 h-20 bg-gray-400"></div>
  <div class="w-20 h-20 bg-gray-600"></div>

マージンを使用する

アイテム間のマージンを設定することで、水平方向の配置を調整できます。この方法はシンプルで理解しやすいですが、多くのアイテムを配置する場合や、複雑なレイアウトを作成する場合には煩雑になる可能性があります。

<div class="flex">
  <div class="w-20 h-20 bg-gray-200 mx-auto"></div>
  <div class="w-20 h-20 bg-gray-400 mx-auto"></div>
  <div class="w-20 h-20 bg-gray-600 mx-auto"></div>
</div>

利点

コードが簡潔になる
シンプルで理解しやすい

欠点

レスポンシブレイアウトに対応しにくい
多くのアイテムを配置する場合や、複雑なレイアウトを作成する場合には煩雑になる可能性がある

align-self プロパティを使用する

align-self プロパティは、個々のアイテムの水平方向の配置を制御できます。これは、「Justify Items」よりも柔軟性がありますが、個々のアイテムごとに設定する必要があるため、コード量が増える可能性があります。

<div class="flex">
  <div class="w-20 h-20 bg-gray-200 align-self-center"></div>
  <div class="w-20 h-20 bg-gray-400 align-self-stretch"></div>
  <div class="w-20 h-20 bg-gray-600 align-self-end"></div>
</div>

利点

レスポンシブレイアウトに対応しやすい
個々のアイテムの配置を柔軟に制御できる

欠点

すべてのアイテムに設定する必要がある
コード量が増える可能性がある

フローレイアウトを使用する

「Justify Items」はFlexboxおよびGridレイアウトにのみ適用されますが、フローレイアウトを使用して同様の効果を得ることができます。フローレイアウトは、アイテムを自然な流れで配置するのに役立ちますが、複雑なレイアウトを作成する場合には、制御が難しくなる可能性があります。

<div class="flow-root">
  <div class="w-20 h-20 bg-gray-200"></div>
  <div class="w-20 h-20 bg-gray-400"></div>
  <div class="w-20 h-20 bg-gray-600"></div>
</div>

利点

コードが簡潔になる
アイテムを自然な流れで配置できる

欠点

レスポンシブレイアウトに対応しにくい
複雑なレイアウトを作成する場合には、制御が難しくなる可能性がある

最適な代替方法の選択

使用する代替方法は、レイアウトの要件と開発者の好みによって異なります。シンプルで分かりやすいレイアウトの場合は、「マージン」を使用する方が良いでしょう。柔軟性とレスポンシブ性を重視する場合は、align-self プロパティを使用するのが良いでしょう。複雑なレイアウトや自然な流れのレイアウトの場合は、フローレイアウトを使用するのが良いでしょう。

FlexboxおよびGridレイアウトの仕様を理解しておくことが重要です。これらのレイアウトシステムには、「Justify Items」以外にも、アイテムの配置を制御するための様々なプロパティが用意されています。
Tailwind CSSには、space-around、space-between、space-evenly などの便利なユーティリティクラスも用意されています。これらのクラスは、「Justify Items」と組み合わせて使用したり、代替として使用したりすることができます。