justify-content

例

開始

justify-start ユーティリティを使用して、コンテナの主軸の開始位置にアイテムを揃えます。

<div class="flex justify-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

中央

justify-center または justify-center-safe ユーティリティを使用して、コンテナの主軸の中央にアイテムを揃えます。

<div class="flex justify-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

<div class="flex justify-center-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

十分なスペースがない場合、justify-center-safe ユーティリティは、中央ではなくコンテナの開始位置にアイテムを揃えます。

終了

justify-end または justify-end-safe ユーティリティを使用して、コンテナの主軸の終了位置にアイテムを揃えます。

<div class="flex justify-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>03</div>
</div>

<div class="flex justify-end-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>03</div>
</div>

十分なスペースがない場合、justify-end-safe ユーティリティは、終了位置ではなくコンテナの開始位置にアイテムを揃えます。

スペース ビトウィーン

justify-between ユーティリティを使用して、各アイテム間に均等なスペースができるように、コンテナの主軸に沿ってアイテムを配置します。

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

スペース アラウンド

justify-around ユーティリティを使用して、各アイテムの両側に均等なスペースができるように、コンテナの主軸に沿ってアイテムを配置します。

<div class="flex justify-around ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

スペース イーブンリー

justify-evenly ユーティリティを使用して、各アイテムの周りに均等なスペースができるように、コンテナの主軸に沿ってアイテムを配置しますが、justify-around を使用した場合に通常各アイテム間に見られるスペースの倍増も考慮します。

<div class="flex justify-evenly ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

ストレッチ

justify-stretch ユーティリティを使用して、コンテンツアイテムがコンテナの主軸に沿って利用可能なスペースを埋めることができるようにします。

<div class="flex justify-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

ノーマル

justify-normal ユーティリティを使用して、justify-content 値が設定されていないかのように、コンテンツアイテムをデフォルトの位置に配置します。

<div class="flex justify-normal ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

レスポンシブデザイン

プレフィックスa justify-content ユーティリティ md: のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみになります。

<div class="flex justify-start md:justify-between ...">
  <!-- ... -->
</div>

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