コンテンツを揃える

複数行のフレックスおよびグリッドコンテナでの行の配置方法を制御するためのユーティリティ。

Class reference

Class
Properties
.content-centeralign-content: center;
.content-startalign-content: flex-start;
.content-endalign-content: flex-end;
.content-betweenalign-content: space-between;
.content-aroundalign-content: space-around;
.content-evenlyalign-content: space-evenly;

Start

content-startを使用して、交差軸の始点に対してコンテナに行を詰め込みます。

1
2
3
4
5
<div class="flex content-start flex-wrap bg-gray-200 h-48">
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
  </div>
</div>

Center

content-centerを使用して、交差軸の中心にあるコンテナに行を詰め込みます。

1
2
3
4
5
<div class="flex content-center flex-wrap bg-gray-200 h-48">
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
  </div>
</div>

End

content-endを使用して、交差軸の端に対してコンテナに行を詰め込みます。

1
2
3
4
5
<div class="flex content-end flex-wrap bg-gray-200 h-48">
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
  </div>
</div>

Space between

content-betweenを使用して、各行の間に同じ量のスペースができるように、コンテナー内の行を割当ます。

1
2
3
4
5
<div class="flex content-between flex-wrap bg-gray-200 h-48">
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
  </div>
</div>

Space around

content-aroundを使用して、各行の周囲に同じ量のスペースができるように、コンテナ内の行を割当ます。

1
2
3
4
5
<div class="flex content-around flex-wrap bg-gray-200 h-48">
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
  </div>
</div>

レスポンシブ

特定のブレークポイントでのフレックスコンテンツの配置を制御するには、既存のユーティリティクラスに {screen}:プレフィックスを追加します。 たとえば、md:content-aroundを使用して、中程度の画面サイズ以上でのみcontent-aroundユーティリティを適用します。

Tailwindのレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

<div class="content-start sm:content-end md:content-center lg:content-between xl:content-around ...">
  <!-- ... -->
</div>
1
2
3
4
5

カスタマイズ

レスポンシブと疑似クラスバリアント

デフォルトでonly responsive バリアントはalign-content utilitiesのために作られます。

あなたはどのバリアントがalign-content utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのalignContentプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     alignContent: ['responsive'],
+     alignContent: ['responsive', 'hover', 'focus'],
    }
  }

機能を使用しない場合

もしalign-content utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのalignContent propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     alignContent: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!