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>