SwitchColumns (l--switchColumns)

l--switchColumns は、複数列以上↔︎1列への切り替えをコンテナクエリやメディアクエリを使わずに実装するクラスです。

CSS

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

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

Lismコンポーネント

Import

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

専用Props

プロパティ	説明
`breakSize` `--breakSize`	横並びを維持するのに必要な幅（親のサイズ）を指定できます。szトークンの指定ができます。

Usage

デフォルト幅で利用する

↓

デフォルト幅で利用する例

Box

リサイズ

<SwitchColumns g="20">
  <div class="-bgc:base-2 -p:20">Box</div>
  <div class="-bgc:base-2 -p:20">Box</div>
  <div class="-bgc:base-2 -p:20">Box</div>
</SwitchColumns>

breakSizeの指定

↓

breakSizeを指定して利用する例

Box

リサイズ

<SwitchColumns breakSize="s" g="20">
  <div class="-bgc:base-2 -p:20">Box</div>
  <div class="-bgc:base-2 -p:20">Box</div>
  <div class="-bgc:base-2 -p:20">Box</div>
</SwitchColumns>

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

flex-growで比率を調整する

↓

子要素にflex-growを指定して比率を調整する例

Box

リサイズ

<SwitchColumns breakSize="s" g="20">
  <div class="-bgc:base-2 -p:20">Box</div>
  <div class="-bgc:base-2 -p:20" style={{ flexGrow: 2 }}>
    Box
  </div>
</SwitchColumns>