CSSフレックスボックスジェネレーター：フレックスレイアウトを視覚的に構築してCSSをエクスポート

Flexboxはナビゲーションバー、ボタングループ、コンテンツのセンタリング、カード行など、1次元レイアウトのための定番CSSツールです。ただし、どのプロパティがコンテナ側でどれがアイテム側か、また希望通りのスペーシングを得るにはどの値を設定すべきか、慣れが必要です。CSSフレックスボックスジェネレーターを使えば、フレックスプロパティを視覚的に設定して使用可能なCSSをコピーできます。

CSSフレックスボックスジェネレーターを試す →

Flexboxの仕組み

Flexboxはコンテナをフレックス書式コンテキストに変換します。そのコンテナの子要素がフレックスアイテムになり、主軸（デフォルトは水平方向）に沿って配置されます。

.container {
  display: flex;
}

この1行だけで始められます——アイテムが水平に並びます。あとはすべて設定次第です。

コンテナプロパティ

これらのプロパティはフレックスコンテナ（親要素）に適用します。

`flex-direction`

主軸の方向を設定：

flex-direction: row;            /* デフォルト：左から右 */
flex-direction: row-reverse;    /* 右から左 */
flex-direction: column;         /* 上から下 */
flex-direction: column-reverse; /* 下から上 */

flex-direction: column のとき、主軸は垂直になります。それに応じて justify-content と align-items の視覚効果が入れ替わります。

`justify-content`

主軸に沿ってアイテムを分配：

値	効果
`flex-start`	始端にまとめる（デフォルト）
`flex-end`	終端にまとめる
`center`	中央に配置
`space-between`	最初・最後のアイテムを端に、間に均等なギャップ
`space-around`	各アイテムの周囲に均等なスペース（端は半分）
`space-evenly`	端を含むすべてのアイテム間に均等なスペース

`align-items`

交差軸（主軸に垂直）に沿ってアイテムを整列：

値	効果
`stretch`	コンテナの高さに合わせて拡張（デフォルト）
`flex-start`	交差軸の始端に整列
`flex-end`	交差軸の終端に整列
`center`	交差軸の中央に配置
`baseline`	テキストのベースラインで整列

`flex-wrap`

アイテムがオーバーフローしたときの折り返しを制御：

flex-wrap: nowrap;        /* デフォルト：1行、オーバーフロー可 */
flex-wrap: wrap;          /* 必要に応じて次行へ折り返し */
flex-wrap: wrap-reverse;  /* 前の行へ折り返し */

複数のアイテムを含むレスポンシブレイアウトでは、flex-wrap: wrap をアイテムの flex-basis や min-width と組み合わせるのが一般的なパターンです。

`gap`

外側のマージンに影響せず、フレックスアイテム間にスペースを追加：

gap: 1rem;           /* 両方向に同じギャップ */
gap: 1rem 2rem;      /* row-gap column-gap */

gap はアイテム間にのみ適用され、アイテムとコンテナ端の間には適用されません。外側のスペースにはコンテナの padding を使います。

`align-content`

アイテムが複数行に折り返す場合、align-content は交差軸に沿って行を分配します（justify-content がアイテムを分配するのと同様）：

align-content: flex-start;
align-content: center;
align-content: space-between;
align-content: stretch; /* デフォルト */

align-content はアイテムが1行のみの場合には効果がありません。

アイテムプロパティ

これらのプロパティはフレックスアイテム（子要素）に適用します。

`flex-grow`

余剰スペースがあるとき、他のアイテムと比べてどれだけ拡張するかを決定：

.item-a { flex-grow: 1; }  /* 余剰スペースの1部分を取得 */
.item-b { flex-grow: 2; }  /* 2部分を取得——item-aの2倍 */
.item-c { flex-grow: 0; }  /* 拡張しない（デフォルト） */

`flex-shrink`

スペースが不足しているとき、他のアイテムと比べてどれだけ縮小するかを決定：

flex-shrink: 1;  /* デフォルト：比率に応じて縮小 */
flex-shrink: 0;  /* 縮小しない */

flex-shrink: 0 を設定するとアイテムが押しつぶされません——アイコン、アバター、フレックス行内の固定幅要素に便利です。

`flex-basis`

フレックスの拡張/縮小が適用される前のアイテムの初期サイズを設定：

flex-basis: auto;    /* width/heightプロパティに基づくサイズ */
flex-basis: 0;       /* ゼロから拡張 */
flex-basis: 200px;   /* 200pxから開始 */
flex-basis: 25%;     /* コンテナの25%から開始 */

`flex` 一括指定

flex は flex-grow、flex-shrink、flex-basis をまとめます：

flex: 1;            /* flex: 1 1 0 — 拡張、縮小、ベースゼロ */
flex: auto;         /* flex: 1 1 auto */
flex: none;         /* flex: 0 0 auto — 固定、拡張も縮小もしない */
flex: 0 1 200px;    /* 拡張なし、縮小可、200pxから開始 */

最も一般的な値は flex: 1（均等分配）と flex: none（固定サイズ）です。

`align-self`

特定のアイテムで align-items を上書き：

.item-special {
  align-self: flex-end; /* このアイテムのみ終端に整列。他は align-items に従う */
}

`order`

DOMの順序を変えずに表示順序を変更：

.item-first { order: -1; } /* order: 0のアイテムより前に表示 */
.item-last  { order: 1;  } /* order: 0のアイテムより後に表示 */

すべてのアイテムのデフォルト order は 0 です。

よく使うFlexboxパターン

中央揃え（両軸）

最も検索されるFlexboxのユースケース：

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

ナビゲーションバー

.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
}

.navbar .logo {
  flex: none;          /* ロゴは拡張も縮小もしない */
  margin-right: auto;  /* 残りのアイテムを右に寄せる */
}

スティッキーフッター

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* メインコンテンツが利用可能な全スペースを占有 */
}

footer {
  flex: none; /* フッターはそのナチュラルサイズを維持 */
}

等幅カラム

.columns {
  display: flex;
  gap: 1rem;
}

.column {
  flex: 1; /* すべてのカラムがスペースを均等に共有 */
}

折り返しカード行

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 280px; /* 拡張と縮小可、280pxから開始 */
  min-width: 0;    /* 内部テキストの切り捨てを許可 */
}

メディアオブジェクト（アイコン＋テキスト）

コメント、通知、リストアイテムの定番パターン：

.media {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.media-icon {
  flex: none;      /* アイコンは固定サイズ */
  width: 40px;
  height: 40px;
}

.media-body {
  flex: 1;         /* テキストが残りのスペースを占有 */
  min-width: 0;    /* オーバーフロー防止 */
}

FlexboxとGrid

2つのレイアウトシステムは互いを補完します：

ユースケース	Flexbox	Grid
ナビゲーションバー	✓	—
単一アイテムのセンタリング	✓	—
カードグリッド（等サイズ）	—	✓
ページレイアウト（行＋列）	—	✓
行内のアイテム整列	✓	—
複雑な重複レイアウト	—	✓
折り返しアイテムリスト	✓	✓

実際のプロジェクトでは両方を使います：Gridでページ構造、Flexboxでコンポーネント内部。

Flexboxのデバッグ

Chrome、Firefox、EdgeはすべてDevToolsにFlexboxインスペクターを内蔵しています。Elementsパネルでフレックスコンテナの横にある flex バッジをクリックすると、フレックスラインと整列ガイドがページ上にオーバーレイ表示されます。

オーバーレイには主軸の方向、余剰スペースの分配、拡張/縮小されたアイテムが表示されます。

CSSフレックスボックスジェネレーターを使う

レイアウトに適した justify-content、align-items、flex-wrap、gap の値の組み合わせを選ぶには、さまざまなオプションを試す必要があります。CSSフレックスボックスジェネレーターはビジュアルプレイグラウンドを提供します：

ボタンですべてのコンテナとアイテムのプロパティを切り替え
ライブレイアウトプレビューが即座に更新
コンテナとアイテムの完全なCSSをコピー
アイテム数、flex-grow/shrink値、flex-basisを調整

CSSフレックスボックスジェネレーターを試す →

Flexboxの仕組み

コンテナプロパティ

flex-direction

justify-content

align-items

flex-wrap

gap

align-content