CSS Flexbox/Grid レイアウトジェネレーター

「Flexbox」または「CSS Grid」タブを選択してモードを切り替え、コンテナ設定とアイテム設定を調整すると下部のプレビューとCSSコードがリアルタイムで更新されます。
プリセットでよく使うレイアウトをワンクリックで呼び出せます。

1次元レイアウトに特化したCSS手法

Flexboxは要素を横方向（row）または縦方向（column）のいずれか一方に沿って並べるためのCSSレイアウト手法です。ナビゲーションメニューの横並び、ボタン群の均等配置、要素の上下左右中央揃えなどに適しています。display: flex を親要素に指定するだけで、子要素が柔軟に配置されます。

主要プロパティの役割

flex-direction で主軸方向を決定、justify-content で主軸方向の配置、align-items で交差軸方向の配置を制御します。flex-wrap: wrap を指定すれば折り返しレイアウトも実現でき、レスポンシブなカード一覧などに活用できます。

2次元レイアウトに強い最新のCSS手法

CSS Gridは行と列の両方を同時に制御できる2次元レイアウトシステムです。ページ全体の骨格設計（ヘッダー/サイドバー/メインコンテンツ/フッター）や、不等幅を含む複雑なグリッド配置に適しています。grid-template-columns と grid-template-rows で格子構造を定義し、アイテムを自由に配置できます。

FlexboxとGridの使い分け

「1方向に並べる」場合はFlexbox、「行と列で区切る」場合はGridが適切です。実際のWebサイトでは両者を組み合わせるのが一般的で、ページ全体の骨格をGridで構築し、各セクション内の要素配置にFlexboxを使うアプローチが推奨されます。

均等3カラムレイアウト（Grid）

display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; で実現します。fr 単位を使うことで、コンテナ幅に応じて自動で均等分割されます。

中央揃え（Flexbox）

display: flex; justify-content: center; align-items: center; で要素を上下左右中央に配置できます。モーダルやローディング画面でよく活用されます。

サイドバー付きレイアウト

GridならGrid: grid-template-columns: 250px 1fr;、FlexboxならサイドバーにFlexbox: flex: 0 0 250px;、メインコンテンツに flex: 1; を指定します。