フレックスシュリンク

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

Class reference

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

Shrink

.flex-shrinkを使用して、必要に応じてフレックスアイテムを縮小できるようにします。

Longer content that cannot flex
Item that will shrink even if it causes the content to wrap
Longer 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">
    Longer content that cannot flex
  </div>
  <div class="flex-shrink text-gray-800 text-center bg-gray-500 px-4 py-2 m-2">
    Item that will shrink even if it causes the content to wrap
  </div>
  <div class="flex-none text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Longer content that cannot flex
  </div>
</div>

Don't shrink

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

Item that can shrink if needed
Item that cannot shrink below its initial size
Item that can shrink if needed
<div class="flex bg-gray-200">
  <div class="flex-shrink text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Item that can shrink if needed
  </div>
  <div class="flex-shrink-0 text-gray-800 text-center bg-gray-500 px-4 py-2 m-2">
    Item that cannot shrink below its initial size
  </div>
  <div class="flex-shrink text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Item that can shrink if needed
  </div>
</div>

レスポンシブ

To control how a flex item shrinks at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:flex-shrink-0 to apply the flex-shrink-0 utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

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

Customizing

Shrink Values

By default Tailwind provides two flex-shrink utilities. You change, add, or remove these by editing the theme.flexShrink section of your Tailwind config.

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

Responsive and pseudo-class variants

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

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

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

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

Disabling

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

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

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

Tailwind UI is now in early access!