コンテナーサイズ

クラス

コンテナートークンが設定するのは長さであり、ビューポートクエリーやコンテナークエリーの定義ではありません。w-full、max-w-fit、basis-min のような全幅や内在サイズの指定は固定ユーティリティで、これらのトークンとは独立しています。

値

各値はサイズ関連のプロパティが参照する長さです。ピクセル換算はルートのフォントサイズを 16px と仮定しています。これらはビューポートのブレークポイントでも、コンテナークエリーの定義でもありません。

最大サイズは上限を定める

max-w-3xs は max-width: var(--container-3xs) を設定し、プリセット値は 16rem です。幅が auto の通常のブロックは、包含ブロックの空間が足りなければ、それより狭くなることがあります。

幅が auto の通常のブロックは、最大幅までの範囲で利用可能な空間に収まります。2 つの親の幅は同じ縮尺で、ルートのフォントサイズを 16px として描いています。

テキストによる説明

1. max-w-3xs は、プリセットの --container-3xs の値 16rem を参照します。どちらの例も通常のブロックレイアウトで幅 auto、border-box のサイズ計算を使い、最小幅の制約はありません。
2. 最初の親は 20rem の空間を提供します。子は最大幅の 16rem で止まり、その後ろに使わない空間が残ります。
3. 2 番目の親は 13rem の空間を提供します。子は幅 16rem にはならず、この狭い空間に収まります。
4. 破線の輪郭は利用可能な幅を示す注記であり、生成されたボーダーやクエリーコンテナーではありません。両方の親は、ルートのフォントサイズを 16px として同じ縮尺で描いています。高さは同じ内容に従います。

一方、w-3xs は幅そのものを設定します。どちらのクラスも中央揃え、padding、クエリー用のコンテインメントを追加しません。--container-md を変更しても、@container(--md) や明示的なクエリーのしきい値は再定義されません。クエリーコンテナーを作るには、ネイティブの container-type と container-name を使います。

実際のサイズには、ネイティブレイアウトも影響します。最小サイズ、box-sizing、Flexbox、Grid によって使用サイズが変わることがあります。最大サイズを指定しても、テキストの折り返しやオーバーフローの規則は変わりません。ページのラッパーやレスポンシブな配置の判断については、レイアウトガイドを参照してください。

関連項目： 名前付きクエリー条件、コンテナークエリーの構文、ネイティブのサイズ規則.

使用例

ダイアログの幅とテキストの行長に上限を設けます。

<div class="… max-w-xs">  <p>Leave this page?</p>  <p class="… max-w-3xs">Changes you made will not be saved.</p></div>

@layer theme {  :root,  :host {    --container-3xs: 16rem;    --container-xs: 20rem  }}@layer utilities {  .max-w-3xs {    max-width: var(--container-3xs)  }  .max-w-xs {    max-width: var(--container-xs)  }}

カスタマイズ

プリセット値を変更したり、サイズを追加したりできます。--container-prose を定義すると、max-w-prose、w-prose などのサイズクラスが使えるようになります。

@theme {  --container-prose: 40rem;}

@layer theme {  :root,  :host {    --container-prose: 40rem  }}@layer utilities {  .max-w-prose {    max-width: var(--container-prose)  }}

関連項目： テーマのディレクティブ、レイアウト.