【Tailwind和訳】FLEXBOX AND GRID/Justify Content

この記事について

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

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

Justify Content

フレックスやグリッドのアイテムがコンテナの主軸に沿ってどのように配置されるかを制御するためのユーティリティーです。

Class	Properties
justify-start	justify-content: flex-start;
justify-end	justify-content: flex-end;
justify-center	justify-content: center;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;
justify-evenly	justify-content: space-evenly;

正順 | Start

justify-startを使用して、コンテナの主軸の開始に対してアイテムを正当化します。

<div class="flex justify-start ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

中央 | Center

justify-centerを使用すると、アイテムをコンテナの主軸の中心に沿って揃えられます。

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

逆順 | End

justify-endを使うと、コンテナの主軸の終わりに対してアイテムを正当化することができます。

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

要素間 | Space between

justify-betweenを使うと、コンテナの主軸に沿って、各アイテム間のスペースが均等になるようにアイテムを揃えます。

<div class="flex justify-between ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

要素周囲 | Space around

justify-aroundを使うと、コンテナの主軸に沿って、各項目の両側に同じだけのスペースを確保します。

<div class="flex justify-around ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

均等 | Space evenly

justify-evenlyを使用して、コンテナの主軸に沿って各アイテムを均等に配置し、各アイテムの周囲に均等なスペースを確保しますが、justify-aroundを使用した場合には各アイテム間のスペースが通常の 2 倍になります。

<div class="flex justify-evenly ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

レスポンシブ | Responsive

フレックスアイテムを特定のブレイクポイントで正当化するには、既存のユーティリティクラスに{screen}:というプレフィックスを追加します。

例えば、md:justify-betweenを使うと、中程度の画面サイズ以上でjustify-betweenユーティリティを適用できます。

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

カスタマイズ | Customizing

バリエーション | Variants

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

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

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

tailwind.config.js

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

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

無効化 | Disabling

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

tailwind.config.js

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