Lism Tips

l--flex（Flexbox で並べる）

l--flex は、中の要素を Flexbox で並べるクラスです。向き・折り返し・そろえ方は、Property Class を足して決めます。

l--flex は、中の要素を Flexbox（フレックスボックス）で並べるクラスです。Flexbox は、要素を横や縦に1列に並べる CSS のしくみです。

どんなときに使う？#

  • 要素を横に並べ、並べ方を自分で細かく決めたいとき
  • 1つの要素だけ広げる・幅を決める、など子どもの要素ごとに調整したいとき

「横に並べて折り返す」だけなら l--cluster、「縦に並べる」だけなら l--stack のほうが短く書けます。

使い方#

並べたい要素を l--flex の箱で囲みます。そのままでは折り返さず、1行に並びます。

表示例

1つめ
2つめ
3つめ
html
<div class="l--flex -g:10">
  <div class="-p:20 -bgc:base-2">1つめ</div>
  <div class="-p:20 -bgc:base-2">2つめ</div>
  <div class="-p:20 -bgc:base-2">3つめ</div>
</div>

並べ方を決める#

Flexbox の指定は、Property Class を足して決めます。下の例は、折り返しあり（-fxw:wrap）・すきま（-g:20）・真ん中寄せ（-jc:center）です。

表示例

1つめ
2つめ
3つめ
html
<div class="l--flex -fxw:wrap -g:20 -jc:center">
  <div class="-p:20 -bgc:base-2">1つめ</div>
  <div class="-p:20 -bgc:base-2">2つめ</div>
  <div class="-p:20 -bgc:base-2">3つめ</div>
</div>
クラス 元の英語 意味
-fxw flex-wrap 折り返すかどうか
-g gap 要素のあいだのすきま
-jc justify-content 並ぶ向きでのそろえ方

ほかの指定は 並べ方（Flex・Grid・配置） にまとめています。

中の要素の大きさを決める#

中の要素には、-fx（flex）や -fxb（flex-basis、もとの幅）を付けられます。

表示例

残りを使う
幅を決める
html
<div class="l--flex -g:20">
  <div class="-fx:1 -p:20 -bgc:base-2">残りを使う</div>
  <div class="-fxb -fxb_sm -p:20 -bgc:base-2" style="--fxb: 50%; --fxb_sm: 33%">幅を決める</div>
</div>

-fx:1 を付けた要素は、空いている幅を使って広がります。2つめは、ふだんは幅 50%、表示例の枠が 480px 以上なら 33% です（_sm で切り替え）。

しくみ#

css
.l--flex {
  display: flex;
}
.l--flex > * {
  min-width: 0;
}

すぐ内側の要素には min-width: 0 が付きます。これで、長い文字などがあっても中の要素が縮めるようになり、箱からはみ出しにくくなります。

React・Astro で書く場合#

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

<Flex fxw="wrap" jc="center" g="20">
  <div>コンテンツ</div>
  <div>コンテンツ</div>
</Flex>

中の要素の幅を画面の幅で変えるときは、fxb={['50%', '33%', '25%']} のように配列で渡します。Astro では lism-css/astro から読み込みます。

関連するページ#

公式ドキュメント

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

ページの一覧