Lism Tips

l--cluster（横に並べて折り返す）

l--cluster は、要素を横に並べ、入りきらなくなったら次の行へ折り返すクラスです。タグやボタンの並びに向いています。

l--cluster は、要素を横に並べて、入りきらなくなったら次の行へ折り返すクラスです。cluster は「ふさ・かたまり」という意味です。

どんなときに使う？#

  • タグ（キーワード）やバッジを横にずらっと並べたいとき
  • ボタンを横に並べ、画面が狭いときは自然に折り返したいとき

列の幅をそろえて並べたいときは、l--columns や l--autoColumns が向いています。

使い方#

並べたい要素を l--cluster の箱で囲み、すきまを -g で決めます。-g は gap（要素と要素のあいだのすきま）の略です。

表示例

りんご
みかん
ぶどう
もも
さくらんぼ
すいか
なし
html
<div class="l--cluster -g:15">
  <div class="-bd -px:10 -bdrs:10">りんご</div>
  <div class="-bd -px:10 -bdrs:10">みかん</div>
  <div class="-bd -px:10 -bdrs:10">ぶどう</div>
  <div class="-bd -px:10 -bdrs:10">もも</div>
  <div class="-bd -px:10 -bdrs:10">さくらんぼ</div>
  <div class="-bd -px:10 -bdrs:10">すいか</div>
  <div class="-bd -px:10 -bdrs:10">なし</div>
</div>

画面の幅を狭くすると、入りきらない要素が次の行へ回ります。

しくみ#

css
.l--cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
  • display: flex：中の要素を横に並べます
  • flex-wrap: wrap：入りきらないと折り返します
  • align-items: center：高さのちがう要素を、縦の真ん中でそろえます（Flexbox の初期値の、高さを引きのばす stretch を止めています）

React・Astro で書く場合#

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

<Cluster g="15">
  <Lism bd px="10" bdrs="10">りんご</Lism>
  <Lism bd px="10" bdrs="10">みかん</Lism>
</Cluster>

Astro では lism-css/astro から読み込みます。

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧