Flow (l--flow)

l--flow is a flow class that manages spacing between child elements using margin.
It is useful for flow layouts of text content such as article content.

Directly under l--flow, the spacing between content items is controlled by --flow and margin-block-start.

Class name	Spacing amount
`.l--flow`	`--flow--base` (`--s30`)
`.l--flow.-flow:s`	`--flow--s` (`--s20`)
`.l--flow.-flow:`	`--flow`

Heading tags receive larger spacing than other elements (adjustable via --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 Component

Import

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

Props

Property	Description
`flow`	Sets the value of `--flow`. When `s` or `l` is specified, the `.-flow:{s\|l}` class is applied.

Usage

Basic usage

↓

l--flow

Heading 2

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

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>

Using `-flow:s`

↓

Using -flow:s

Heading 2

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

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>

Setting a custom value

When a non-token value is passed to flow, it is output as the -flow: class and --flow CSS variable.

↓

Setting a custom value

Contents…

Heading

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Contents…

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

Note that l--flow falls back to --flow--base when --flow is undefined, but be aware that nesting inside another l--flow will inherit the parent’s value.

`is--skipFlow`

When used as a direct child of .l--flow, this class cancels the spacing with the following sibling element. This is useful when you want to place an absolutely positioned element at the start of flow content.

↓

Example

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>

Notes on nesting `l--flow`

When you nest l--flow directly inside another l--flow and set a custom --flow value on the child, be aware that this value also affects the child l--flow’s own margin-block-start. (This issue can be avoided by wrapping the nested l--flow in an additional element to avoid being a direct child.)

↓

When --flow is defined on a directly nested l--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 Component

Import

Props

Usage

Basic usage

Heading 2

Heading 3

Using -flow:s

Heading 2

Heading 3

Setting a custom value

Heading

is--skipFlow

Notes on nesting l--flow

Using `-flow:s`

`is--skipFlow`

Notes on nesting `l--flow`