🚥

【Tailwind和訳】FLEXBOX AND GRID/Align Content

2021/10/24に公開約3,500字

この記事について

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

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

Align Content

複数行のフレックスやグリッドコンテナでの行の配置を制御するユーティリティーです。

Class Properties
content-center align-content: center;
content-start align-content: flex-start;
content-end align-content: flex-end;
content-between align-content: space-between;
content-around align-content: space-around;
content-evenly align-content: space-evenly;

Start

content-startを使用して、交差軸の開始に対してコンテナ内の行をパックします。

<div class="h-48 flex flex-wrap content-start ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Center

交差軸の中心にあるコンテナに行を詰めるには、content-centerを使用します。

<div class="h-48 flex flex-wrap content-center ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

End

交差軸の端に合わせて行をコンテナに詰めるには、content-endを使用します。

<div class="h-48 flex flex-wrap content-end ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Space between

content-betweenを使用して、各行の間のスペースが等しくなるようにコンテナ内の行を分配します。

<div class="h-48 flex flex-wrap content-between ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Space around

content-aroundを使用して、各行の周囲に同じ量のスペースがあるようにコンテナ内の行を分配します。

<div class="h-48 flex flex-wrap content-around ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Space evenly

content-evenlyを使用してコンテナ内の行を分配すると、各アイテムの周囲に均等なスペースが確保されますが、content-aroundを使用した場合、各アイテム間のスペースが通常の 2 倍になることも考慮されます。

<div class="h-48 flex flex-wrap content-evenly ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Responsive

特定のブレークポイントにおけるフレックスコンテンツの配置を制御するには、既存のユーティリティクラスに{screen}:というプレフィックスを追加します。たとえば、md:content-aroundを使用すると、中程度の画面サイズ以上でのみcontent-aroundユーティリティを適用できます。

<div class="content-start md:content-around ...">
  <!-- ... -->
</div>

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

カスタマイズ

バリアント

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

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

例えば、この設定ではhoverfocusのバリアントも生成されます。

tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       alignContent: ['hover', 'focus'],
      }
    }
  }

無効化

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

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

Discussion

ログインするとコメントできます