検索

Cluster (l--cluster)

l--cluster は、複数の要素を横方向に連続的に並べて配置し、数が多ければ折り返すクラスです。

CSS

.l--cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center; // stretch を解除
}

Lismコンポーネント

Import

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

Usage

使用例

シンプルな<Cluster>の例
Lorem
ipsum
Dolor
Sit amet
Consectetur
Adipisicing
Elit
Quisquam
Quos
リサイズ
<Cluster g="15">
<Lism bd px="10" bdrs="10">
Lorem
</Lism>
<Lism bd px="10" bdrs="10">
ipsum
</Lism>
<Lism bd px="10" bdrs="10">
Dolor
</Lism>
<Lism bd px="10" bdrs="10">
Sit amet
</Lism>
<Lism bd px="10" bdrs="10">
Consectetur
</Lism>
<Lism bd px="10" bdrs="10">
Adipisicing
</Lism>
<Lism bd px="10" bdrs="10">
Elit
</Lism>
<Lism bd px="10" bdrs="10">
Quisquam
</Lism>
<Lism bd px="10" bdrs="10">
Quos
</Lism>
</Cluster>

© Lism CSS. All rights reserved.