【Tailwind和訳】FLEXBOX AND GRID/Justify self

この記事について

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

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

Justify Self

個々のグリッドアイテムがインライン軸に沿ってどのように配置されるかを制御するためのユーティリティ。

Class	Properties
justify-self-start	justify-self: auto;
justify-self-end	justify-self: start;
justify-self-center	justify-self: end;
justify-self-between	justify-self: center;
justify-self-around	justify-self: stretch;

自動 | Auto

justify-self-autoを使うと、グリッドのjustify-itemsプロパティの値に基づいてアイテムを整列させることができます。

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-auto ...">1</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>

始端 | Start

justify-self-startを使用して、グリッドアイテムをそのインライン軸の開始点に合わせます。

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-start ...">1</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>

中央 | Center

justify-self-centerを使用すると、グリッドアイテムをインライン軸の中心に沿って配置することができます。

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center ...">1</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>

末端 | End

Justify-self-endを使用すると、グリッドアイテムをそのインライン軸の最後に配置することができます。

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end ...">1</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>

全幅 | Stretch

Justify-self-stretchを使うと、グリッドアイテムをインライン軸のグリッド領域いっぱいに伸ばすことができます。

<div class="grid justify-items-start ...">
  <!-- ... -->
  <div class="justify-self-stretch ...">1</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>

レスポンシブ | Responsive

特定のブレークポイントにおけるグリッド領域内のグリッドアイテムの配置を制御するには、既存のユーティリティクラスに{screen}:というプレフィックスを追加します。

例えば、md:justify-self-endを使用すると、中程度のスクリーンサイズ以上でのみjustify-self-endユーティリティを適用できます。

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

カスタマイズ | Customizing

バリエーション | Variants

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

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

例えば、このコンフィグは hover と focus のバリアントも生成します。

tailwind.config.js

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

無効化 | Disabling

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

tailwind.config.js

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