l--switchColumns（横並びと縦並びを切り替える）

l--switchColumns は、箱の幅が十分なら横に並べ、足りなくなったら全部を縦に積みかえるクラスです。メディアクエリやコンテナクエリ（画面や箱の幅で CSS を切り替えるしくみ）を書かずに、この切り替えができます。

どんなときに使う？#

• 2〜3個の箱を、広いところでは横並び、せまいところでは縦並びにしたいとき
• 「一部だけ折り返す」のではなく、「全部横」か「全部縦」のどちらかにしたいとき

列の数を自動で増やしたり減らしたりしたいなら l--autoColumns が向いています。

使い方#

並べたい要素を l--switchColumns の箱で囲みます。初期値では、箱の幅が 400px（--sz--xs）以上なら横並びになります。表示例は、PC では横、スマートフォンでは縦に並びます。

<div class="l--switchColumns -g:15">
  <div class="l--box -bgc:base-2 -p:20">1</div>
  <div class="l--box -bgc:base-2 -p:20">2</div>
  <div class="l--box -bgc:base-2 -p:20">3</div>
</div>

専用の変数#

基準は画面の幅ではなく、l--switchColumns を付けた箱そのものの幅です。値には、幅のトークン（--sz--xs・--sz--s など。デザイントークン）が使えます。

切り替わる幅を変える#

--breakSize に var(--sz--s)（640px）を入れると、箱が 640px 以上のときだけ横並びになります。表示例の枠は PC でも約 650px なので、ぎりぎり横に並びます。

<div class="l--switchColumns -g:15" style="--breakSize: var(--sz--s)">
  <div class="l--box -bgc:base-2 -p:20">1</div>
  <div class="l--box -bgc:base-2 -p:20">2</div>
  <div class="l--box -bgc:base-2 -p:20">3</div>
</div>

幅の比率を変える#

横並びのときの幅は、子要素の flex-grow（余った幅をどれだけもらうか）で変えられます。下のように片方を 2 にすると、およそ 1:2 になります。

<div class="l--switchColumns -g:20" style="--breakSize: var(--sz--s)">
  <div class="l--box -bgc:base-2 -p:20">Box</div>
  <div class="l--box -bgc:base-2 -p:20" style="flex-grow: 2">Box</div>
</div>

l--switchColumns のしくみ#

l--switchColumns が付ける CSS は次のとおりです。

.l--switchColumns {
  --breakSize: var(--sz--xs); /* 横並びを維持する幅（親のサイズで指定する） */
  display: flex;
  flex-wrap: wrap;
}

.l--switchColumns > * {
  flex-grow: 1;
  flex-basis: calc((var(--breakSize) - 100%) * 9999);
}

子要素の flex-basis（もとの幅）は、「--breakSize − 箱の幅」に大きな数をかけた値です。箱が --breakSize より広いと、この値はマイナスになり、幅 0 から均等に広がって横に並びます。箱がせまいと、とても大きな値になり、1つずつ1行を使うので縦に積まれます。

React・Astro で書く場合#

コンポーネントでは <SwitchColumns> を使い、切り替わる幅は breakSize で渡します。"s" のように幅のトークンの名前で書けます。

import { SwitchColumns, Box } from 'lism-css/react';

<SwitchColumns breakSize="s" g="20">
  <Box>Box</Box>
  <Box>Box</Box>
</SwitchColumns>

Astro では lism-css/astro から読み込みます。書き方は Lism コンポーネント（React・Astro） にまとめています。

関連するページ#

• l--withSide（メインと横の2列）：片方の幅を決めた2列を切り替える
• l--autoColumns（列の数を自動で決める）：幅から列の数を決める
• l--cluster（横に並べて折り返す）：入りきらない要素だけ折り返す