コンテンツにスキップ
Lism CSS

Flow

l--flow は、displayがflow-rootで、かつ子要素間の余白を管理できるレイアウトモジュールです。

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

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

また、見出しタグのみ余白が2倍になるようになっています。

↓
CSS

対応コンポーネント

Section titled “対応コンポーネント”

lism-css では<Flow>コンポーネントを配布しています。

Import

Section titled “Import”
import { Flow } from 'lism-css/react';

Props

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

Usage

Section titled “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…

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

<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を併用する

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

Heading 2

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

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

Heading 3

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

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

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

Contents… 

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

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

is--skipFlow

Section titled “is--skipFlow”

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

↓
例
Skip flow…

Lorem ipsum, Example content…

Lorem ipsum, Example content…

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 を入れ子にする時の注意点

Section titled “l--flow を入れ子にする時の注意点”

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

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

Flow contents…

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>