Stack (l--stack)

l--stack は、複数の要素を Flex レイアウトで縦並びに配置するためのクラスです。

CSS

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

Lismコンポーネント

Import

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

Usage

基本的な使い方

↓

シンプルな<Stack>の例

コンテンツ

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

センター寄せレイアウト

<Stack ai="center">( .l--stack.-ai:center )の組み合わせで、Every Layout で言うところの “内在的な中央寄せ” （コンテンツが短い時だけ中央寄せ）にできます。

↓

内在的な中央寄せ

見出し

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

リサイズ

<Stack ai="center" g="20" p="30">
  <h3>見出し</h3>
  <p>...</p>
  <p>...</p>
</Stack>