【Tailwind和訳】FLEXBOX AND GRID/Flex Direction

この記事について

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

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

Flex Direction

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

Class	Properties
flex-row	flex-direction: row;
flex-row-reverse	flex-direction: row-reverse;
flex-col	flex-direction: column;
flex-col-reverse	flex-direction: column-reverse;

行 | Row

フレックスアイテムをテキストと同じ方向に水平に配置するには、flex-rowを使用します。

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

行の反転 | Row reversed

フレックスアイテムを逆方向に水平に配置するには、flex-row-reverseを使用します。

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

列 | Column

フレックスアイテムを垂直方向に配置するには、flex-colを使用します。

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

列の反転 | Column reversed

フレックスアイテムを逆方向に垂直に配置するには、flex-col-reverseを使用します。

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

レスポンシブ | Responsive

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

例えば、要素にmd:flex-rowというクラスを追加すると、中程度のスクリーンサイズ以上でflex-rowユーティリティが適用されます。

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

<div class="flex flex-col md:flex-row ...">
  <!-- ... -->
</div>

カスタマイズ | Customizing

バリアント | Variants

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

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

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

tailwind.config.js

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

無効化 | Disabling

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

tailwind.config.js

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