Lism Tips

l--flow（文章の間をあける）

l--flow は、段落や見出しのあいだのすきまを margin で自動でそろえるクラスです。記事の本文のような文章に向いています。

l--flow は、中の段落や見出しのあいだに、読みやすいすきまを自動で空けるクラスです。ブログの記事の本文のような、文章のかたまりに向いています。

どんなときに使う？#

  • 記事の本文のように、段落・見出し・画像が続く文章を並べるとき
  • 見出しの前だけ、少し広く空けたいとき

ボタンやカードの中身のように、同じすきまで縦に積みたいだけなら l--stack が向いています。

使い方#

文章を l--flow の箱で囲みます。

表示例

1つめの段落です。

2つめの段落です。

見出し

見出しの前は、少し広く空きます。

html
<div class="l--flow">
  <p>1つめの段落です。</p>
  <p>2つめの段落です。</p>
  <h3>見出し</h3>
  <p>見出しの前は、少し広く空きます。</p>
</div>

すきまは、2つめ以降の要素の上の margin（外側の余白）で作られます。いちばん上の要素の上は空きません。

すきまの大きさ#

クラス すきまの大きさ
l--flow --flow--base（--s30、約 24px。lang="ja" のページでは --s35、約 28px）
l--flow -flow:s --flow--s（--s20、約 16px）
l--flow -flow: 自分で決めた --flow の値

--flow--base と --flow--s は、ページ全体（:root）で決められている値です。日本語のページ（lang="ja"）は文字がぎっしり詰まって見えるので、--flow--base が少し広くなっています。

すきまを小さくする#

-flow:s を足すと、すきまが小さくなります。

表示例

1つめの段落です。

2つめの段落です。

見出し

3つめの段落です。

html
<div class="l--flow -flow:s">
  <p>1つめの段落です。</p>
  <p>2つめの段落です。</p>
  <h3>見出し</h3>
  <p>3つめの段落です。</p>
</div>

すきまを自分で決める#

-flow: を付け、style で --flow に値を入れます。

表示例

1つめ

2つめ

3つめ

html
<div class="l--flow -flow:" style="--flow: 4px">
  <p class="-bd">1つめ</p>
  <p class="-bd">2つめ</p>
  <p class="-bd">3つめ</p>
</div>

見出しの前は広く空く#

l--flow のすぐ内側の h1〜h4 の見出しは、上のすきまが広くなります。広さは「--flow の 1.5 倍＋文字の大きさの半分（0.5em）」です。h5・h6 は広くなりません。

is--skipFlow#

is--skipFlow を付けた要素のすぐ次の要素は、上のすきまが 0 になります。文章の先頭に、position: absolute（ほかの要素に重ねて置く指定）の要素を置くときなどに使います。

表示例

is--skipFlow を付けた要素

すきま無しで続く

ここからはふつうに空く

html
<div class="l--flow">
  <p class="is--skipFlow -bd">is--skipFlow を付けた要素</p>
  <p class="-bd">すきま無しで続く</p>
  <p class="-bd">ここからはふつうに空く</p>
</div>

入れ子にするときの注意#

注意

l--flow のすぐ内側に、--flow の値を変えた l--flow を入れると、内側の要素のすきまだけでなく、内側の l--flow 自身の上のすきまも変わってしまいます。間に別の箱を1つはさんで包むと、この問題は起きません。

html
<div class="l--flow">
  <p>外側の文章</p>
  <div>
    <div class="l--flow -flow:" style="--flow: 5px">
      <p>内側の文章</p>
      <p>内側の文章</p>
    </div>
  </div>
</div>

しくみ#

css
.l--flow {
  display: flow-root;
}
.l--flow > * + * {
  --flow: var(--flow--base);
  --mbs: var(--flow);
  margin-block-start: var(--mbs);
}
.l--flow > :where(img, video, iframe) {
  display: block;
}
.-flow\:s > * {
  --flow: var(--flow--s);
}
.-flow\: > * {
  --flow: inherit;
}
.l--flow > :where(h1, h2, h3, h4) {
  --mbs: calc(var(--flow) * 1.5 + 0.5em);
  margin-block-start: var(--mbs);
}
.is--skipFlow + *,
.l--flow > :first-child {
  --mbs: 0px;
}

display: flow-root は、中の要素の margin が箱の外へはみ出さないようにする指定です。すぐ内側の画像・動画・iframe は、display: block になります。

React・Astro で書く場合#

コンポーネントでは <Flow> を使います。flow に s を渡すと -flow:s が付き、それ以外の値を渡すと -flow: クラスと --flow 変数になります。

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

<Flow flow="s">
  <p>コンテンツ</p>
  <h2>見出し</h2>
  <p>コンテンツ</p>
</Flow>

Astro では lism-css/astro から読み込みます。

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧