【Tailwind和訳】FLEXBOX AND GRID/Justify Items

この記事について

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

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

アイテムの揃え方

グリッドアイテムをインライン軸に沿って整列させる方法を制御するユーティリティです。

Class	Properties
justify-items-start	justify-items: start;
justify-items-end	justify-items: end;
justify-items-center	justify-items: center;
justify-items-stretch	justify-items: stretch;

スタート

Justify-items-startを使用すると、グリッドアイテムをインライン軸の開始位置に対して正当化することができます。

<div class="grid justify-items-start ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

エンド

Justify-items-endを使用すると、グリッドアイテムをそのインライン軸の端に対して正当化することができます。

<div class="grid justify-items-end ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

センター

justify-items-centerを使うと、グリッドアイテムをインライン軸に沿って両端揃えにすることができます。

<div class="grid justify-items-center ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

ストレッチ

justify-items-stretchを使用して、アイテムをインライン軸に沿ってストレッチします。

<div class="grid justify-items-stretch ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

レスポンシブ

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

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

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

カスタマイズ

バリアント

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

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

例えば、このコンフィグはホバーとフォーカスのバリアントも生成します。

tailwind.config.js

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

無効化

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

tailwind.config.js

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

---