l--stack（縦に並べる）

l--stack は、中に入れた要素を上から下へ縦に並べるためのクラスです。カードの中身、フォームの項目、ボタンの列など、「縦に積んで、すきまをそろえたい」ところで使います。

どんなときに使う？#

• 見出し・文章・ボタンを、同じすきまで縦に並べたいとき
• カードの中身のように、ひとかたまりの部品を縦に組み立てるとき

文章を読みやすく並べたいだけなら、見出しの前を少し広く空けてくれる l--flow のほうが向いています。

使い方#

並べたい要素を l--stack の箱で囲み、すきまを -g:20 のように指定します。-g は gap（要素と要素のあいだのすきま）の略です。

<div class="l--stack -g:20">
  <div class="-p:20 -bgc:base-2">1つめ</div>
  <div class="-p:20 -bgc:base-2">2つめ</div>
  <div class="-p:20 -bgc:base-2">3つめ</div>
</div>

-g の後ろの数字は、決まった余白の値（余白のトークン）から選びます。数字が大きいほど、すきまが広くなります。

ほかの値と、トークンのしくみは 余白（padding・margin・gap） にまとめています。

中身を横の真ん中にそろえる#

-ai:center を足すと、中の要素が横の真ん中に集まります。-ai は align-items（交差する向きのそろえ方）の略です。

<div class="l--stack -ai:center -g:20 -p:30 -bd">
  <h3>見出し</h3>
  <p>文章が短いときは、真ん中に寄って見えます。</p>
  <p>…</p>
</div>

l--stack のしくみ#

l--stack が付けるのは、次の2つの CSS だけです。すきま（gap）は自分では持たないので、-g で指定します。

.l--stack {
  display: flex;
  flex-direction: column;
}

React・Astro で書く場合#

コンポーネントでは <Stack> を使い、すきまは g で渡します。

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

<Stack g="20">
  <p>コンテンツ</p>
  <p>コンテンツ</p>
</Stack>

Astro では lism-css/astro から読み込みます。コンポーネントの書き方は Lism コンポーネント（React・Astro） で説明しています。

関連するページ#

• l--flow（文章の間をあける）：文章を読みやすく並べる
• l--cluster（横に並べて折り返す）：横に並べる
• l--flex（Flexbox で並べる）：向きや並び方を細かく決める