CSS Flexboxジェネレーター
flex-direction・justify-content・align-items・flex-wrap・gapをGUIで操作しながら、リアルタイムのプレビューを見てFlexboxレイアウトを試せる無料ツール。生成された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時は高さ）に収まらないアイテムが自動的に次の行へ折り返されます。レスポンシブなカードレイアウトによく使われます。
よくある質問
余談ですが ― 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は「ページ全体の格子状レイアウト」という形で組み合わせて使われることが多くなっています。