フレックス

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

Class reference

Class
Properties
.flex-1flex: 1 1 0%;
.flex-autoflex: 1 1 auto;
.flex-initialflex: 0 1 auto;
.flex-noneflex: none;

Initial

.flex-initialを使用して、フレックスアイテムを縮小しますが、初期サイズを考慮して拡大しないようにします。

Items don't grow when there's extra space

Short
Medium length

Items shrink if possible when needed

Short
Medium length
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
<div class="flex bg-gray-200">
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Medium length
  </div>
</div>

<div class="flex bg-gray-200">
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Medium length
  </div>
  <div class="flex-initial text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
  </div>
</div>

Flex 1

.flex-1を使用して、フレックスアイテムを必要に応じて拡大および縮小し、初期サイズを無視します。

Default behavior

Short
Medium length
Significantly larger amount of content

With .flex-1

Short
Medium length
Significantly larger amount of content
<div class="flex bg-gray-200">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Medium length
  </div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Significantly larger amount of content
  </div>
</div>

Auto

.flex-autoを使用して、初期サイズを考慮してフレックスアイテムを拡大および縮小できるようにします。

Default behavior

Short
Medium length
Significantly larger amount of content

With .flex-auto

Short
Medium length
Significantly larger amount of content
<div class="flex bg-gray-200">
  <div class="flex-auto text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-auto text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Medium length
  </div>
  <div class="flex-auto text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Significantly larger amount of content
  </div>
</div>

None

.flex-noneを使用して、フレックスアイテムが拡大または縮小するのを防ぎます。

Item that can grow or shrink if needed
Item that cannot grow or shrink
Item that can grow or shrink if needed
<div class="flex bg-gray-200">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Item that can grow or shrink if needed
  </div>
  <div class="flex-none text-gray-800 text-center bg-gray-500 px-4 py-2 m-2">
    Item that cannot grow or shrink
  </div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Item that can grow or shrink if needed
  </div>
</div>

Responsive

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

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

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

カスタマイズ

Flex Values

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

  // tailwind.config.js
  module.exports = {
    theme: {
      flex: {
        '1': '1 1 0%',
        auto: '1 1 auto',
-       initial: '0 1 auto',
+       inherit: 'inherit',
        none: 'none',
+       '2': '2 2 0%',
      }
    }
  }

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!