【Tailwind和訳】FLEXBOX AND GRID/Flex

この記事について

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

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

Flex

フレックスアイテムの成長と縮小をコントロールするユーティリティー。

Class	Properties
flex-1	flex: 1 1 0%;
flex-auto	flex: 1 1 auto;
flex-initial	flex: 0 1 auto;
flex-none	flex: none;

初期設定 | Initial

flex-initialを使用すると、フレックスアイテムの初期サイズを考慮して、縮小はできても成長はできません。

<div class="flex">
  <div class="flex-initial ...">
    <!-- 拡大はしないが、必要に応じて縮小する -->
  </div>
  <div class="flex-initial ...">
    <!-- 拡大はしないが、必要に応じて縮小する -->
  </div>
  <div class="flex-initial ...">
    <!-- 拡大はしないが、必要に応じて縮小する -->
  </div>
</div>

フレックス 1 | Flex 1

flex-1を使用すると、フレックスアイテムは初期サイズを無視して、必要に応じて成長したり縮小したりすることができます。

<div class="flex">
  <div class="flex-1 ...">
    <!-- 初期のサイズを考慮することなく、必要に応じて拡大したり縮小したりします。 -->
  </div>
  <div class="flex-1 ...">
    <!-- 初期のサイズを考慮することなく、必要に応じて拡大したり縮小したりします。 -->
  </div>
  <div class="flex-1 ...">
    <!-- 初期のサイズを考慮することなく、必要に応じて拡大したり縮小したりします。 -->
  </div>
</div>

自動 | Auto

flex-autoを使用すると、フレックスアイテムが初期サイズを考慮しながら成長・縮小することができます。

<div class="flex ...">
  <div class="flex-auto ...">
    <!-- 最初のサイズを考慮して、必要に応じて拡大、縮小します。 -->
  </div>
  <div class="flex-auto ...">
    <!-- 最初のサイズを考慮して、必要に応じて拡大、縮小します。 -->
  </div>
  <div class="flex-auto ...">
    <!-- 最初のサイズを考慮して、必要に応じて拡大、縮小します。 -->
  </div>
</div>

なし | None

flex-noneを使うと、フレックスアイテムの拡大や縮小を防ぐことができます。

<div class="flex ...">
  <div class="flex-1 ...">
    <!-- 必要に応じて拡大、縮小する -->
  </div>
  <div class="flex-none ...">
    <!-- 拡大、縮小しない -->
  </div>
  <div class="flex-1 ...">
    <!-- 必要に応じて拡大、縮小する -->
  </div>
</div>

レスポンシブ | Responsive

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

<div class="flex ...">
  <!-- ... -->
  <div class="flex-none md:flex-1 ...">Responsive flex item</div>
  <!-- ... -->
</div>

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

カスタマイズ | Customizing

フレックス値 | 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%',
      }
    }
  }

バリエーション | Variants

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

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

例えば、下記の設定では hover と focus のバリアントも生成します。

tailwind.config.js

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

無効化 | Disabling

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

tailwind.config.js

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