アイテムを揃える

フレックスアイテムとグリッドアイテムをコンテナの交差軸に沿って配置する方法を制御するためのユーティリティ

Class reference

Class
Properties
.items-startalign-items: flex-start;
.items-endalign-items: flex-end;
.items-centeralign-items: center;
.items-baselinealign-items: baseline;
.items-stretchalign-items: stretch;

Stretch

コンテナの交差軸を満たすようにアイテムを引き伸ばすには、items-stretchを使用します。

1
2
3
<div class="flex items-stretch bg-gray-200 h-24">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Start

items-startを使用して、アイテムをコンテナの交差軸の始点に揃えます。

1
2
3
<div class="flex items-start bg-gray-200 h-24">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Center

items-centerを使用して、コンテナの交差軸の中心に沿ってアイテムを配置します。

1
2
3
<div class="flex items-center bg-gray-200 h-24">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

End

items-endを使用して、アイテムをコンテナの交差軸の端に揃えます。

1
2
3
<div class="flex items-end bg-gray-200 h-24">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Baseline

items-baselineを使用して、すべてのベースラインが整列するように、コンテナの交差軸に沿ってアイテムを整列します。

1
2
3
<div class="flex items-baseline bg-gray-200 h-24">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 text-base">1</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 text-2xl">2</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 text-lg">3</div>
</div>

Responsive

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

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

<div class="items-stretch sm:items-start md:items-center lg:items-end xl:items-baseline ...">
  <!-- ... -->
</div>
1
2
3

カスタマイズ

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

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

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

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

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

機能を使用しない場合

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

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

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

Tailwind UI is now in early access!