Flow

l--flow is a layout module with display: flow-root that manages spacing between child elements.

Inside 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 double the spacing compared to other elements.

↓

CSS

Component

lism-css provides a <Flow> 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

↓

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>

↓

Using -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>

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

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

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

Component

Import

Props

Usage

Heading 2

Heading 3

Heading 2

Heading 3

Heading

is--skipFlow

Notes on nesting l--flow

`is--skipFlow`

Notes on nesting `l--flow`