Flow (l--flow)

l--flow は、子要素間の余白を margin で管理するフロークラスです。
記事コンテンツなどのテキストコンテンツ向けのフローレイアウトに活用できます。

l--flowの直下では、コンテンツの間隔が --flowとmargin-block-start で管理されます。

クラス名	余白量
`.l--flow`	`--flow--base` (`--s30`)
`.l--flow.-flow:s`	`--flow--s` (`--s20`)
`.l--flow.-flow:`	`--flow`

また、見出しタグのみ余白が大きくなるようになっています。（--flow-hScale で調整可能）

CSS

.l--flow {
  // コンテンツ間の余白バリエーションを定義
  --flow--base: var(--s30);
  --flow--s: var(--s20);

  display: flow-root;

  > * + * {
    --flow: var(--flow--base);
    margin-block-start: var(--flow);
  }

  // flow 直下のメディア要素は block に初期リセット
  > :where(img, video, iframe) {
    display: block;
  }
}

.-flow\:s > * {
  --flow: var(--flow--s);
}

.-flow\: > * {
  --flow: inherit;
}

// 見出しの上部の余白は広くする.
.l--flow > :where(h1, h2, h3, h4, h5, h6) {
  margin-block-start: calc(var(--flow) * var(--flow-hScale, 2));
}

// 打ち消し
.is--skipFlow + *,
.l--flow > :first-child {
  --flow: 0px;
}

Lismコンポーネント

Import

import { Flow } from 'lism-css/react';

専用Props

プロパティ	説明
`flow`	`--flow` の値を指定できます。 `s`, `l` を指定した場合、`.-flow:{s\|l}` クラスが付与されます。

Usage

基本的な使い方

↓

l--flow

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

Heading 2

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。

Heading 3

Lorem ipsum, LIST content…
Lorem ipsum, LIST content…
Lorem ipsum, LIST content…

<Flow>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
  <h2>Heading</h2>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
</Flow>

`-flow:s`を併用する

↓

-flow:sを併用する

Heading 2

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

Heading 3

Lorem ipsum, LIST content…
Lorem ipsum, LIST content…
Lorem ipsum, LIST content…

<Flow flow="s">
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
  <h2>Heading</h2>
  <p>Lorem ipsum content...</p>
  <p>Lorem ipsum content...</p>
</Flow>

任意の値をセットする

flowにトークン値以外を指定すると、-flow: クラスと--flow変数で出力されます。

↓

任意の値をセットする

Contents…

Heading

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

Contents…

<Flow flow="10px">
  <p>Contents...</p>
  <p>Contents...</p>
  <p>Contents...</p>
</Flow>

l--flowは--flowが未定義であれば--flow--baseがセットされますが、ネストされていると親の値を継承されることに注意してください。

`is--skipFlow`

.l--flow 直下で使用すると、次に続く兄弟要素との余白量を打ち消します。
フローコンテンツの先頭に absolute な要素を配置したい場合などに活用できます。

↓

例

Skip flow…

Lorem ipsum, Example content…

<div class="l--flow">
  <div class="is--skipFlow">skip flow...</div>
  <p>Lorem ipsum, Example content...</p>
  <p>Lorem ipsum, Example content...</p>
  <p>Lorem ipsum, Example content...</p>
</div>

`l--flow` を入れ子にする時の注意点

l--flowの直下でl--flowをネストしてカスタム値を設定（--flowを変数で直接指定）すると、その子側のl--flow自身のmargin-block-startにも影響が出ることに注意してください。
(直下にネストしなければ問題ないため、一階層さらに別要素でラップすることでこの問題は回避できます)

↓

l--flowの直下のl--flowで--flowを定義した場合

Flow contents…

*Nested l--flow(--flow:5px)

*Nested flow contents…

Flow contents…

*Nested l--flow(--flow:s)

*Nested flow contents…

<Flow>
  <p>Flow contents...</p>
  <p>Flow contents...</p>
  <Flow flow="5px" bgc="orange:10%">
    <p>
      *Nested <code class="-fz:s -bd -p:5 -bdrs:10">`l--flow`(`--flow:5px`)</code>
    </p>
    <p>*Nested flow contents...</p>
  </Flow>
  <p>Flow contents...</p>
  <Flow flow="s" bgc="green:10%">
    <p>
      *Nested <code class="-fz:s -bd -p:5 -bdrs:10">`l--flow`(`--flow:s`)</code>
    </p>
    <p>*Nested flow contents...</p>
  </Flow>
</Flow>

Flow (l--flow)

CSS

Lismコンポーネント

Import

専用Props

Usage

基本的な使い方

Heading 2

Heading 3

-flow:sを併用する

Heading 2

Heading 3

任意の値をセットする

Heading

is--skipFlow

l--flow を入れ子にする時の注意点

`-flow:s`を併用する

`is--skipFlow`

`l--flow` を入れ子にする時の注意点