レスポンシブFlexbox折り返しレイアウト

Flexboxによるレスポンシブな折り返し

Flexboxの最も強力な機能の1つがflex-wrap: wrapで、コンテナが狭くなるとアイテムを新しい行に流すことができます。flex-basisと組み合わせることで、メディアクエリなしでレスポンシブレイアウトを作成できます。

CSSコード

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.item {
  flex: 1 1 300px;
}

仕組み

省略形flex: 1 1 300pxの意味：

• flex-grow: 1 — アイテムが利用可能なスペースを埋めるように拡大
• flex-shrink: 1 — 必要に応じてアイテムが縮小可能
• flex-basis: 300px — 各アイテムは少なくとも300px幅を確保

コンテナが十分に広い場合、アイテムは横に並びます。コンテナがアイテムの300px最小幅を維持できないほど縮小すると、アイテムは次の行に折り返します。

折り返しの計算

コンテナ幅W、ギャップG、1行あたりN個のアイテムの場合：

• 1行あたりのアイテム数 = floor((W + G) / (flex-basis + G))
• 960pxコンテナ、16pxギャップ、300pxベースの場合：floor(976/316) = 1行3アイテム

よくある注意点

最後の行はアイテム数が少ないため、完全な行のアイテムより幅広くなります。一貫したサイズを維持するには、flex-grow: 0を使用するか、アイテムにmax-widthを設定します。