Flexbox方向切り替えとコンテナクエリ

コンテナクエリによるFlexbox方向切り替え

最も一般的なレスポンシブパターンの1つは、縦（column）と横（row）レイアウトの切り替えです。コンテナクエリを使えば、コンポーネントの実際の利用可能スペースに基づいてこれを行えます。

CSS

.flex-container {
  container-type: inline-size;
  container-name: flex-area;
}

.flex-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@container flex-area (min-width: 500px) {
  .flex-layout {
    flex-direction: row;
    align-items: center;
  }
}

Column から Row へ

狭いコンテナでは、アイテムは縦に積み重なります。コンテナが500pxに達すると、アイテムは横に流れ、利用可能な幅をより有効に活用します。

実践例：ユーザープロフィール

@container flex-area (min-width: 500px) {
  .user-profile {
    flex-direction: row;
  }
  .user-profile .avatar {
    width: 80px;
    height: 80px;
  }
  .user-profile .info {
    flex: 1;
  }
}

ユーザープロフィールコンポーネントは、狭いコンテキストではアバターが名前の上に表示され、十分なスペースがある場合は横に表示されます。プロフィールウィジェットがどこにでも表示される可能性がある場合、ビューポートベースのメディアクエリでこれを確実に実現することは不可能です。

なぜflex-wrapだけでは不十分か

flex-wrap: wrapはアイテムを折り返しますが、レイアウトがいつ切り替わるか、ブレークポイントで何が変わるかを制御できません。コンテナクエリは、正確なコンテナ幅で任意のCSSプロパティを変更できます。