【Tailwind和訳】FLEXBOX AND GRID/Align Items

この記事について

この記事は、FLEXBOX AND GRID/Align Itemsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Align Items

flex や grid items がコンテナの横軸に沿ってどのように配置されるかを制御するユーティリティーです。

Class	Properties
items-start	align-items: flex-start;
items-end	align-items: flex-end;
items-center	align-items: center;
items-baseline	align-items: baseline;
items-stretch	align-items: stretch;

Strech

items-stretch を使うと、コンテナの横軸いっぱいにアイテムが伸びます。

<div class="flex items-stretch ...">
  <div class="py-4">1</div>
  <div class="py-12">2</div>
  <div class="py-8">3</div>
</div>

Start

items-start を使用すると、コンテナの横軸の開始位置にアイテムが配置されます。

<div class="flex items-start ...">
  <div class="h-12">1</div>
  <div class="h-24">2</div>
  <div class="h-16">3</div>
</div>

Center

items-center を使うと、コンテナの十字軸の中心に沿ってアイテムが配置されます。

<div class="flex items-center ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

End

アイテムをコンテナの横軸の端に配置するには、items-end を使用します。

<div class="flex items-end ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Baseline

items-baseline を使用すると、コンテナの横軸に沿ってアイテムのベースラインがすべて揃います。

<div class="flex items-baseline ...">
  <div class="pt-4 pb-6 ...">1</div>
  <div class="pt-6 pb-10 ...">2</div>
  <div class="pt-8 pb-4 ...">3</div>
</div>

Responsive

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

<div class="items-stretch md:items-center ...">
  <!-- ... -->
</div>

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

Customizing

Variants

デフォルトでは、 align-items ユーティリティのためにレスポンシブバリアントのみが生成されます。

tailwind.config.js ファイルの variants セクションにある alignItems プロパティを変更することで、align-items ユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       alignItems: ['hover', 'focus'],
      }
    }
  }

Disabling

プロジェクトで align-items ユーティリティを使用しない場合は、設定ファイルの corePlugins セクションで alignItems プロパティを false に設定することで、ユーティリティを完全に無効にすることができます。

tailwind.config.js

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