⚡すべてのツール 💻開発者ツール 📝テキストツール 🎨デザインツール 🖼️画像・メディア 🔢計算ツール 🔒セキュリティ 📄PDFツール 📐単位変換

CSS Flexbox＆Gridレイアウト生成器

CSS FlexboxとGridレイアウトをビジュアルに設定・プレビューし、コードを即時コピーします。

アイテム数

配置方向 (flex-direction)

主軸アライメント (justify-content)

交差軸アライメント (align-items)

折り返し (flex-wrap)

アイテム間隔 (gap) 12px

ライブプレビューコンテナ

CSSコード

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

HTMLコード

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

使い方

1 CSS Flexbox＆Gridレイアウト生成器を開き、処理する内容を入力、貼り付け、または選択します。
2 目的に合わせてオプションと出力形式を調整します。
3 結果を確認し、必要に応じてコピーまたはダウンロードします。

主な利用シーン

CSS FlexboxとGridレイアウトをビジュアルに設定・プレビューし、コードを即時コピーします。日常業務、開発、学習、簡易確認に利用できます。

プライバシーとデータ処理

このツールはブラウザで動作します。機密データを扱う前に、端末とブラウザの安全性を確認してください。

CSS Flexbox・Grid レイアウトジェネレーター：見ながら調整してコードをコピー

このツールを使えば、構文を覚えていなくても Flexbox や CSS Grid のレイアウトをメニュー操作で組み立てられます。上部で「Flexbox レイアウト」と「CSS Grid レイアウト」を切り替え、＋／－ボタンでアイテム数を 1〜12 個に設定し、各プロパティを選ぶと右側のプレビューに即時反映されます。下にはコンテナの CSS と対応する HTML 構造が生成され、それぞれコピーボタンが付いています。初期状態の出力は .container { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 12px; } です。

Flexbox モードでは flex-direction（row・row-reverse・column・column-reverse）、主軸の配置 justify-content（space-between・space-around・space-evenly を含む）、交差軸の配置 align-items（stretch・baseline を含む）、flex-wrap を設定できます。主軸は方向によって変わる点に注意しましょう。flex-direction を column にすると justify-content は縦方向、align-items は横方向を制御するようになります。アイテムが幅に収まらないとき、nowrap では 1 行に詰め込まれ、wrap にすると折り返されます。

Grid モードには、repeat(2, 1fr)〜repeat(4, 1fr) の均等な列、中央を広くする 1fr 2fr 1fr、コンテナ幅に合わせて列数を自動で決めるレスポンシブな repeat(auto-fit, minmax(100px, 1fr)) が用意されています。行は auto、repeat(2, 80px)、1fr 1fr から選べ、justify-items と align-items で各セル内での横・縦の位置を決めます。両モード共通の gap スライダー（0〜40px）は列と行の間隔をまとめて設定でき、アイテムごとに margin を付けるより整ったコードになります。

生成されるコードは .container のレイアウト指定と .item の HTML 構造だけで、アイテム自体の色・サイズ・余白はデザインに合わせて別途書いてください。使い分けの目安は、ボタンの横並びやナビゲーション、要素の中央寄せといった一次元の並びには Flexbox、カード一覧やダッシュボードのように行と列を同時に揃える二次元のレイアウトには Grid です。変更はすべてブラウザ上で即座に反映されるので、プロパティごとの違いを試しながら確かめられます。