CSS Flexbox Playground

flexboxレイアウトをインタラクティブに構築・可視化できます。コンテナと要素のプロパティを調整してライブプレビューで確認しましょう。

動作方法: コンテナと要素のプロパティを調整してflexboxレイアウトを構築します。プレビューで変更がすぐに反映されます。準備ができたら生成されたCSSをコピーできます。

12px
1
2
3
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  gap: 12px;
}

CSS Flexboxとは

CSS Flexbox（Flexible Box Layout）は、アイテムを行または列に配置するための1次元レイアウト手法です。強力なアライメント機能と動的なスペース配分を提供し、コンポーネントレイアウト、ナビゲーションバー、レスポンシブデザインに最適です。

Flexbox Playgroundの使い方

まずコンテナのプロパティを調整します。flex-directionはメイン軸の方向を、justify-contentはそこでのスペース配分を、align-itemsはクロス軸での子要素の位置を制御します。子要素を追加・削除したり、flex-grow、flex-shrink、flex-basisを個別にカスタマイズして、利用可能なスペースへの応答を確認できます。

FlexboxとCSS Grid

Flexboxは1次元レイアウト向け設計で、行または列のいずれかです。CSS Gridは行と列の両方を同時に扱う2次元レイアウトに対応しています。コンポーネントレベルのレイアウト（ナビゲーションバー、カード行、フォームコントロール）にはFlexboxを、ページレベルのレイアウトにはGridを使用するとよいでしょう。両者は組み合わせて使用できます。

Flexboxの一般的なパターン

  • センタリングコンテンツ：justify-contentとalign-itemsをcenterに設定
  • サイドバーレイアウト：1つの要素を固定幅、もう1つをflex-grow: 1に設定
  • ナビゲーションバー：row directionでspace-betweenを使用
  • Holy Grail：ネストされたflexを使用してヘッダー、フッター、3列のボディを配置
  • 等幅カラム：すべての子要素にflex: 1を設定
  • レスポンシブラップ：flex-wrapとパーセンテージベースのflex-basisを使用