親のコンテナ幅によってかわります。
is--container
-container:s
Lorem content ...
is--wide
is--container
-container:m
Lorem content ...
Lorem content ...
is--wide
is--container
-container:l
Lorem content ...
Lorem content ...
is--wide
is--fullwide
は、親が has--gutter
を持っていても全幅に広がります。
また、is--flow
の直下で is--fullwide
が連続すると、その間の余白は0となります。
is--container
-container:m
has--gutter
Lorem content ...
is--fullwide
is--fullwide
Lorem content ...
div
↓親要素(ここではdiv)を飛び越えることはありません。
is--fullwide
@propetry
が有効なブラウザでは、直前のコンテナ要素が呼び出された位置を基準としたコンテナ幅 (100cqi
)まで広がります。(コンテナの親にhas--gutter
がある場合はその分を加算します。)
親要素を飛び越えて広げたいコンテンツに活用できます。
is--container
-container:m
Lorem content ...
Overwide
div
is--fullwide
Overwide
div
Overwide
is--container
Overwide
div
-maxW:s
Overwide
is--container
-container:s
Overwide
Lorem content ...
div
is--container.-maxW
Lorem content ...
is--fullwide
Overwide