CSS Flexboxジェネレーター
flex-direction・justify-content・align-items・flex-wrap・gapをGUIで操作しながら、リアルタイムのプレビューを見てFlexboxレイアウトを試せる無料ツール。生成されたCSSコードはワンクリックでコピー可能。
Flexboxを触りながら組み立てる
Flexbox は要素を1本の軸に沿って並べるためのレイアウト方式です。このツールでは `flex-direction`・`justify-content`・`align-items`・`flex-wrap`・`gap` を画面上で切り替えながら、その場で結果を見て、できあがったCSSをそのままコピーできます。
**Flexbox でつまずく原因のほとんどは、`justify-content` と `align-items` がどちらの向きに効くのかという点にあります。** 前者は**主軸**に沿った配置、後者は**交差軸**に沿った配置を決めます。そして厄介なのは、**`flex-direction` を `row` から `column` へ変えた瞬間、この2つの軸が入れ替わる**ことです。横並びのときに水平方向を担っていた `justify-content` は、縦積みにすると垂直方向を担うようになります。「中央に寄らない」という悩みの多くは、**変えるべきプロパティが入れ替わっていることに気づいていない**だけなのです。
使い方
- プリセットから始める 中央寄せ・両端揃え・縦積みなど、よく使う形が用意してあります。
- flex-direction を切り替える **`row` と `column` を行き来すると、軸の入れ替わりが目で分かります。**
- 配置のプロパティを試す `justify-content` と `align-items` を順に変えて、効き方の違いを確かめます。
- 生成されたCSSをコピーする 納得のいく形になったら、そのままコードへ貼り付けられます。
使いこなすためのヒント
- justify-contentは「主軸（メイン軸）」、align-itemsは「交差軸（クロス軸）」に対して揃え方を指定します。flex-direction: columnにすると主軸が縦向きになるため、2つのプロパティの見た目の効果が入れ替わります。
- 「中央寄せ」プリセットは justify-content: center と align-items: center を組み合わせたもので、要素を上下左右の中央に配置する最も定番のFlexboxパターンです。
- gapプロパティはアイテム間の余白のみに適用され、コンテナの外側の余白（margin）には影響しません。marginと違って隣接するアイテム間にだけ均等な隙間を作れるのが利点です。
- align-selfを個別のアイテムに指定すると、コンテナ全体のalign-itemsの設定を無視してそのアイテムだけ揃え方を変えられます。1つだけ目立たせたい要素がある場合に便利です。
- flex-wrap: wrapを有効にすると、コンテナの幅（またはcolumn時は高さ）に収まらないアイテムが自動的に次の行へ折り返されます。レスポンシブなカードレイアウトによく使われます。
活用シーン
ナビゲーションバーを組む
**ロゴを左、メニューを右へ置く形は `justify-content: space-between` の典型です。**
カードを等間隔で並べる
`gap` を使えば、余白のために `margin` を打ち消す小細工が要らなくなります。
要素を上下左右の中央に置く
**`justify-content` と `align-items` の両方を `center` にするのが最短です。**
Flexboxを学ぶ
値を変えながら結果を見ると、説明を読むより早く理解できます。
Flexboxの用語
- 主軸
- `flex-direction` が定める、要素が並んでいく向きです。**`row` なら水平、`column` なら垂直になります。**
- 交差軸
- 主軸と直交する向きです。**主軸が入れ替われば、こちらも一緒に入れ替わります。**
- justify-content
- **主軸に沿った**配置を決めます。中央寄せ・両端揃え・均等配置などを指定します。
- align-items
- **交差軸に沿った**配置を決めます。既定の `stretch` では子が高さいっぱいに伸びます。
- flex-wrap
- 入りきらない要素を折り返すかどうかです。`nowrap` のままだと縮んで押し込まれます。
- gap
- 要素の間に空ける余白です。**`margin` と違い、端に余分な余白が付きません。**
よくある質問
余談ですが ― Flexboxが変えたCSSレイアウトの歴史
CSS Flexbox（正式名称: CSS Flexible Box Layout Module）が登場する以前、Webページの横並びレイアウトはfloatプロパティを使って実現するのが一般的でした。しかしfloatは本来「テキストを画像の周りに回り込ませる」ための機能であり、レイアウト目的での使用には、要素の高さが揃わない・親要素の高さが潰れる（クリアランス問題）など多くの回避策（clearfixハックなど）が必要でした。
2009年にW3Cで最初の草案が公開されたFlexboxは、「1次元の並び」に特化したレイアウトモデルとして設計されました。要素を主軸方向に伸縮させたり、余白を均等に配分したり、垂直方向の中央寄せを1行で実現できるなど、floatでは何行ものCSSハックが必要だった処理が、justify-content・align-itemsといった宣言的なプロパティだけで完結するようになりました。
2015年前後に主要ブラウザでの実装が出揃うと、Flexboxはナビゲーションバー・カードレイアウト・フォームの整列など、Webデザインの定番パターンを実現する標準手段として急速に普及しました。「Flexboxで垂直方向の中央寄せができるようになった」ことは、当時のフロントエンド開発者コミュニティで特に歓迎された変化の1つとして知られています。
現在ではFlexboxと2次元レイアウトに特化したCSS Gridが役割を分担しながら共存しており、Flexboxは「1方向に並ぶコンポーネント内部のレイアウト」、Gridは「ページ全体の格子状レイアウト」という形で組み合わせて使われることが多くなっています。