補足説明

is—flow のネスト時の注意点

--flowMを直接指定する時、ネストに注意が必要です。

↓

is--flow > is--flow.-flow:sは問題なし

Contents…

Nested contents…

Contents…

<Box isFlow>
  <p>Contents...</p>
  <p>Contents...</p>
  <Box isFlow='s' bgc='green:10%'>
    <p>Nested contents...</p>
    <p>Nested contents...</p>
  </Box>
  <p>Contents...</p>
</Box>

is--flowは--flowMが未定義であれば--flowM-mがセットされます。しかし、--flowMをセットした先祖があればその値を継承します。

ネストされた状態でデフォルト値の--flowM-mを再度使用したい場合は、-flow:mを併用して明示的に指定してください。

↓

--flowMをセットしたis--flowの中でのネスト

is--flow[--flowM:4px]

Contents…

is--flow

Nested contents…

Contents…

is--flow.-flow:m

Nested contents…

Contents…

<Box isFlow='4px'>
  <p>`is--flow[--flowM:4px]`</p>
  <p>Contents...</p>
  <Box isFlow bgc='red:10%'>
    <p>`is--flow`</p>
    <p>Nested contents...</p>
  </Box>
  <p>Contents...</p>
  <p>Contents...</p>
  <Box isFlow='m' bgc='green:10%'>
    <p>`is--flow.-flow:m`</p>
    <p>Nested contents...</p>
  </Box>
  <p>Contents...</p>
  <p>Contents...</p>
</Box>

さらに、is--flowの直下で--flowMを定義すると、自身のmargin-block-startにも影響が出ることに注意してください。

↓

is--flowの直下で--flowMを定義

is--flow

Contents…

isFlow='4px'

Nested contents…

Contents…

<Box isFlow>
  <p>`is--flow`</p>
  <p>Contents...</p>
  <Box isFlow='4px' bgc='red:10%'>
    <p>`isFlow='4px'`</p>
    <p>Nested contents...</p>
  </Box>
  <p>Contents...</p>
  <p>Contents...</p>
</Box>

コンテンツのサイズ制御について

ページのコンテンツエリアが次のような構造をしているとします。

<main>
  <article>
    ...コンテンツ...
  </article>
</main>

ここで、例えばarticle内のコンテンツ幅を800pxにしたい時を考えてみてください。

主に、次の①か②の選択肢があると思います。

/* ① コンテナ自身(コンテンツの親要素)の幅を制御する */
article{
  max-width: 800px;
}

/* ② 各コンテンツ（コンテナの直下要素）の幅を制御する */
article > * {
  max-width: 800px;
  margin-inline: auto;
}

どちらも一長一短ありますが、とくに理由がなければ①を採用することが多いのではないでしょうか。

しかし、Lismでは ② の方法を推奨しています。

この②のアプローチに対応するためのコンテンツ制御クラスが、is--containerクラスです。また、②を前提としてis--wideやis--fullwideクラスは設計されています。

これはなぜかというと、① のアプローチをベースにした場合、途中で全幅サイズで表示したいコンテンツを作る場合の処理が複雑になってしまうためです。

↓

こういうやつ

コンテンツ…

全幅コンテンツ

コンテンツ…

②であれば、基本のCSSはmax-width:100%だけでOKで、少しの例外処理を加えれば済みます。

しかし①では、次のようなCSSになってしまいます。

.fullwide{
  max-width: 100vw;
  left: calc(50% - 50vw);
}

/* その他環境を考慮したCSS... */

これだけみるとそこまで複雑ではないように見えますが、vwではスクロールバーの幅が考慮されないという問題点があったり、汎用性を考慮するとCSSがどんどん複雑化していきます。

ただし、@propertyが有効なブラウザでは①の問題点もほぼ解消されるようになってきました。

そこで、Lismでは、is--overwide を用意しています。

①のようなアプローチを採用するには、is--containerにmax-widthを指定して運用し、全幅コンテンツに対してis--overwideクラスを使用てください。

↓

例

…コンテンツ…

全幅コンテンツ

…コンテンツ…

<Box hasGutter>
  <Container maxW='30rem' py='40' bd='u:guide' bdc='blue'>
    <Box bd='u:guide' py='10'>...コンテンツ...</Box>
    <Box isOverwide hasGutter bgc='gray:20%' py='20'>全幅コンテンツ</Box>
    <Box bd='u:guide' py='10'>...コンテンツ...</Box>
  </Container>
</Box>