自身を揃える

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

Class reference

Class
Properties
.self-autoalign-self: auto;
.self-startalign-self: flex-start;
.self-endalign-self: flex-end;
.self-centeralign-self: center;
.self-stretchalign-self: stretch;

Auto

self-autoを使用して、コンテナのalign-itemsプロパティの値に基づいてアイテムを整列します。

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="self-auto flex-1 text-gray-800 text-center bg-gray-500 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

コンテナのalign-items値に関係なく、self-startを使用してアイテムをコンテナの交差軸の始点に位置合わせします。

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="self-start flex-1 text-gray-800 text-center bg-gray-500 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

コンテナのalign-items値に関係なく、self-centerを使用して、コンテナの交差軸の中心に沿ってアイテムを位置合わせします。

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="self-center flex-1 text-gray-800 text-center bg-gray-500 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

コンテナのalign-items値に関係なく、self-endを使用してアイテムをコンテナの交差軸の端に揃えます。

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="self-end flex-1 text-gray-800 text-center bg-gray-500 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>

Stretch

コンテナのalign-items値に関係なく、self-stretchを使用してアイテムを引き伸ばし、コンテナの交差軸を埋めます。

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="self-stretch flex-1 text-gray-800 text-center bg-gray-500 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>

レスポンシブ

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

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

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

カスタマイズ

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

デフォルトで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-self utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのalignSelf propertyfalseに設定することで完全に無効にすることができます。

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

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

Tailwind UI is now in early access!