align-content

複数行のフレキシブルコンテナとグリッドコンテナで行をどのように配置するかを制御するためのユーティリティ。

クラススタイル

content-normal

align-content: normal;

content-center

align-content: center;

content-start

align-content: flex-start;

content-end

align-content: flex-end;

content-between

align-content: space-between;

content-around

align-content: space-around;

content-evenly

align-content: space-evenly;

content-baseline

align-content: baseline;

content-stretch

align-content: stretch;

例

content-start を使用して、コンテナ内の行をクロス軸の開始位置に詰めます

<div class="grid h-56 grid-cols-3 content-start gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

content-center を使用して、コンテナ内の行をクロス軸の中央に詰めます

<div class="grid h-56 grid-cols-3 content-center gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

content-end を使用して、コンテナ内の行をクロス軸の終了位置に詰めます

<div class="grid h-56 grid-cols-3 content-end gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

content-between を使用して、各行の間に均等なスペースができるようにコンテナ内の行を配置します

<div class="grid h-56 grid-cols-3 content-between gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

content-around を使用して、各行の周りに均等なスペースができるようにコンテナ内の行を配置します

<div class="grid h-56 grid-cols-3 content-around gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

content-evenly を使用して、各項目の周りに均等なスペースができるようにコンテナ内の行を配置しますが、通常 content-around を使用する場合に各項目の間に見られるスペースの倍増も考慮します

<div class="grid h-56 grid-cols-3 content-evenly gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

content-stretch を使用して、コンテンツ項目がコンテナのクロス軸に沿って利用可能なスペースを埋めることができるようにします

<div class="grid h-56 grid-cols-3 content-stretch gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

content-normal を使用して、align-content 値が設定されていないかのように、コンテンツ項目をデフォルトの位置に詰めます

<div class="grid h-56 grid-cols-3 content-normal gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

プレフィックスan align-content ユーティリティ md: のようなブレークポイントバリアントを使用して、ユーティリティを適用するのはmedium スクリーンサイズ以上の場合のみです

<div class="grid content-start md:content-around ...">
  <!-- ... -->
</div>

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