フレックスグロウ

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

Class reference

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

Grow

.flex-growを使用して、フレックスアイテムを伸長させ、使用可能なスペースを埋めます。

Content that cannot flex
Item that will grow
Content that cannot flex
<div class="flex bg-gray-200">
  <div class="flex-none text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Content that cannot flex
  </div>
  <div class="flex-grow text-gray-800 text-center bg-gray-500 px-4 py-2 m-2">
    Item that will grow
  </div>
  <div class="flex-none text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Content that cannot flex
  </div>
</div>

Don't grow

.flex-grow-0を使用して、フレックスアイテムが伸長しないようにします。

Will grow
Will not grow
Will grow
<div class="flex bg-gray-200">
  <div class="flex-grow text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Will grow
  </div>
  <div class="flex-grow-0 text-gray-800 text-center bg-gray-500 px-4 py-2 m-2">
    Will not grow
  </div>
  <div class="flex-grow text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Will grow
  </div>
</div>

レスポンシブ

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

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

<div class="flex ...">
  <!-- ... -->
  <div class="flex-grow-0 sm:flex-grow md:flex-grow-0 lg:flex-grow xl:flex-grow-0 ...">
    Responsive flex item
  </div>
  <!-- ... -->
</div>
Item that can grow or shrink if needed
Responsive flex item
Item that can grow or shrink if needed

カスタマイズ

Grow Values

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

  // tailwind.config.js
  module.exports = {
    theme: {
      flexGrow: {
        '0': 0,
-       default: 1,
+       default: 2,
+       '1': 1,
      }
    }
  }

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはflex grow utilitiesのために作られます。

あなたはどのバリアントがflex grow utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのflexGrowプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     flexGrow: ['responsive'],
+     flexGrow: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしflex grow utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのflexGrow propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!