【Tailwind和訳】FLEXBOX AND GRID/Flex Grow

この記事について

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

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

Flex Grow

フレックスアイテムの成長を制御するためのユーティリティ。

Class	Properties
flex-grow-0	flex-grow: 0;
flex-grow	flex-grow: 1;

Grow

flex-grow を使用すると、フレックスアイテムが空きスペースいっぱいに成長することができます。

<div class="flex ...">
  <div class="flex-none w-16 h-16 ...">
    <!-- This item will not grow -->
  </div>
  <div class="flex-grow h-16 ...">
    <!-- This item will grow -->
  </div>
  <div class="flex-none w-16 h-16 ...">
    <!-- This item will not grow -->
  </div>
</div>

Don't Grow

flex-grow-0 を使用すると、flex アイテムの成長を防ぐことができます。

<div class="flex ...">
  <div class="flex-grow h-16 ...">
    <!-- This item will grow -->
  </div>
  <div class="flex-grow-0 h-16 ...">
    <!-- This item will not grow -->
  </div>
  <div class="flex-grow h-16 ...">
    <!-- This item will grow -->
  </div>
</div>

レスポンシブ

特定のブレークポイントでフレックスアイテムの成長を制御するには、既存のユーティリティクラスに {screen}: というプレフィックスを追加します。たとえば、md:flex-grow-0 を使用すると、medium の画面サイズ以上で flex-grow-0 ユーティリティが適用されます。

<div class="flex ...">
  <!-- ... -->
  <div class="flex-grow md:flex-grow-0 ...">Responsive flex item</div>
  <!-- ... -->
</div>

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

カスタマイズ

Grow の値

デフォルトでは、Tailwind は 2 つの flex-grow ユーティリティを提供しています。これらを変更、追加、または削除するには、Tailwind 設定の theme.flexGrow セクションを編集します。

tailwind.config.js

  module.exports = {
    theme: {
      flexGrow: {
        '0': 0,
-      DEFAULT: 1,
+      DEFAULT: 2,
+      '1': 1,
      }
    }
  }

バリアント

デフォルトでは、レスポンシブバリアントのみがフレックスグロウユーティリティ用に生成されます。

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

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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