【Tailwind和訳】FLEXBOX AND GRID/Flex Shrink

この記事について

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

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

Flex Shrink

フレックスアイテムの縮小方法を制御するためのユーティリティ。

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

Shrink

必要に応じてフレックスアイテムを収縮させるには、flex-shrink を使用します。

<div class="flex ...">
  <div class="flex-grow w-16 h-16 ...">
    <!-- This item will grow or shrink as needed -->
  </div>
  <div class="flex-shrink w-64 h-16 ...">
    <!-- This item will shrink -->
  </div>
  <div class="flex-grow w-16 h-16 ...">
    <!-- This item will grow or shrink as needed -->
  </div>
</div>

Don't shrink

フレックスアイテムが縮まないようにするには、flex-shrink-0 を使用します。

<div class="flex ...">
  <div class="flex-1 h-16 ...">
    <!-- This item will grow or shrink as needed -->
  </div>
  <div class="flex-shrink-0 h-16 w-32 ...">
    <!-- This item will not shrink below its initial size-->
  </div>
  <div class="flex-1 h-16 ...">
    <!-- This item will grow or shrink as needed -->
  </div>
</div>

レスポンシブ

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

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

カスタマイズ

Shrink の値

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

tailwind.config.js

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

バリアント

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

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

例えば、この設定では hover と focus バリアントも生成されます。

tailwind.config.js

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

無効化

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

tailwind.config.js

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