CSS PRIMITIVE LAYOUT

Switcherで、余裕がある時だけ横並びにする

画面幅ではなく、レイアウト自身に必要な余裕で切り替える。コンポーネントの設計から画面が出来上がります。

Try resizing 親幅を変えて、横並びが成立するかを見る

Parent width

Switcher threshold: 720px

Plan

要件や制約を並べ、必要な幅がある時だけ横に置く。

Build

余裕がなければ自然に縦積み。読み順はそのまま保つ。

Review

画面幅ではなく、置かれた場所の幅にレイアウトが反応する。

.switcher {
  --threshold: 720px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

Point

Switcherは、画面幅ではなく「横並びが成立する余裕」でレイアウトを切り替えるプリミティブです。