Flexboxによるメイソンリー風レイアウト

Flexboxによるメイソンリー風レイアウト

真のメイソンリーレイアウト（Pinterestのような）はCSS Gridのmasonry値やJavaScriptライブラリで最もよく実現されます。しかし、Flexboxはflex-direction: columnとflex-wrap: wrapを使用してその効果を近似できます。

CSSコード

.masonry {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 800px;
  gap: 16px;
}

.masonry-item {
  flex: 0 0 auto;
  width: calc(33.333% - 11px);
}

仕組み

flex-direction: columnとflex-wrap: wrapで、アイテムはカラム内を上から下に流れ、コンテナの固定高さに達すると次のカラムに折り返します。

主な要件

1. 固定コンテナ高さ: 折り返しが発生するにはコンテナに定義された高さが必要です。
2. 固定アイテム幅: column方向ではflex-basisが幅ではなく高さを制御するため、アイテムには定義された幅が必要です。
3. 可変アイテム高さ: メイソンリー効果を作成するには、各アイテムが自然な高さまたは異なる高さを持つ必要があります。

制限事項

機能	Flexbox Column	真のメイソンリー
埋め順序	カラム優先（上から下）	行優先（左から右）
コンテナ高さ	固定が必要	動的
アイテム順序	直感的でない場合あり	読み順序を維持

より良い代替案

本番のメイソンリーレイアウトには以下を検討してください：

• CSS Gridメイソンリー（実験的、grid-template-rows: masonry）
• JavaScriptライブラリ（Masonry.jsやIsotope）
• CSSカラム（よりシンプルだが柔軟性は低い）