【Tailwind和訳】FLEXBOX AND GRID/Flex Wrap

この記事について

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

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

Flex Wrap

フレックスアイテムの折り返しを制御するユーティリティーです。

Class	Properties
flex-wrap	flex-wrap:;
flex-wrap-reverse	flex-wrap: wrap-reverse;
flex-nowrap	flex-wrap: nowrap;

折返しなし | Don't wrap

flex-nowrapを使用すると、フレックスアイテムが折り返さないようになり、アイテムが親要素から切れて見えなくなります。

<div class="flex flex-nowrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

通常の折り返し | Wrap normally

flex-wrapを使用して、フレックスアイテムの折返しを許可します。

<div class="flex flex-wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

反転折返し | Wrap reversed

flex-wrap-reverseを使用すると、フレックスアイテムを逆方向に折り返すことができます。

<div class="flex flex-wrap-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

レスポンシブ | Responsive

特定のブレークポイントでのフレックスアイテムのラップを制御するには、既存のユーティリティクラスに{screen}:というプレフィックスを追加します。

たとえば、md:flex-wrap-reverseを使用すると、中程度の画面サイズ以上でflex-wrap-reverseユーティリティが適用されます。

<div class="flex flex-wrap md:flex-wrap-reverse ...">
  <!-- ... -->
</div>

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

カスタマイズ | Customizing

バリエーション | Variants

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

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

例えば、このコンフィグは hover と focus のバリアントも生成します。

tailwind.config.js

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

無効化| Disabling

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

tailwind.config.js

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