Flow

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

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

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

また、見出しタグのみ、--flow--h が加算され、余白が少し広くなるようになっています。

↓

CSS

対応コンポーネント

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

Import

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

Props

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

Usage

↓

l--flow

ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

Heading

ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。

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

Heading

ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

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…

<Flow hov='itemGuide'>
  <p>Flow contents...</p>
  <Flow flow='5px' bgc='orange:10%' hov='itemGuide'>
    <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

対応コンポーネント

Import

Props

Usage

Heading

Heading

Heading

is--skipFlow

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

`is--skipFlow`

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