Cluster (l--cluster)
l--cluster is a class that arranges multiple elements horizontally in sequence, wrapping to the next line when there are too many to fit.
CSS
.l--cluster {
display: flex;
flex-wrap: wrap;
align-items: center; // stretch を解除
}Lism Component
Import
import { Cluster } from 'lism-css/react';Usage
Example
↓
Simple
<Cluster> exampleLorem
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>