Flexboxジェネレーター｜CSSレイアウト
FlexboxプロパティをビジュアルUIで設定してCSSコードを生成します。ライブプレビュー付き。
Flexboxジェネレーター｜CSSレイアウトとは
CSS Flexboxジェネレーターは、display: flex・flex-direction・justify-content・align-items・flex-wrapなど主要なFlexboxプロパティをビジュアルUIで設定してCSSコードを自動生成できる無料ツールです。リアルタイムプレビューで確認しながらFlexboxレイアウトを設計できます。
使い方
- 1flex-direction・justify-content・align-itemsなどのプロパティをボタン選択またはドロップダウンで設定してください。
- 2ライブプレビューエリアでフレックスコンテナとアイテムの配置をリアルタイムで確認してください。
- 3「CSSを生成する」ボタンをクリックして生成されたCSSコードをコピーし、プロジェクトに貼り付けてください。
メリット・特徴
- display・flex-direction・justify-content・align-items・flex-wrap・gap など主要Flexboxプロパティをすべてカバー
- ライブプレビューでプロパティ変更の結果を即時視覚確認
- 生成CSSをワンクリックでコピーして即使用可能
- FlexboxのCSSを覚えながら学習ツールとしても活用できる
- 登録不要・インストール不要、ブラウザだけで動作する完全無料ツール
- 生成CSSはdisplay: flexから始まる標準的なCSS形式でどのプロジェクトにも使える
CSS Flexboxプロパティ完全ガイド
Flexboxはモダンなウェブレイアウトの基本技術です。フレックスコンテナ（親要素）とフレックスアイテム（子要素）のそれぞれに設定するプロパティを正確に理解することで、思い通りのレイアウトを実現できます。
コンテナプロパティ（親要素）の解説
display: flexでフレックスコンテナを作成します。flex-directionはメイン軸の方向を決め、row（横）・column（縦）・row-reverse・column-reverseから選択します。justify-contentはメイン軸方向の整列（flex-start・flex-end・center・space-between・space-around・space-evenly）を制御します。align-itemsはクロス軸方向の整列（stretch・flex-start・flex-end・center・baseline）を制御します。flex-wrapは折り返し（nowrap・wrap・wrap-reverse）を設定します。
アイテムプロパティ（子要素）の解説
flex-growは残りスペースへの拡大比率（デフォルト0）です。flex-shrinkはスペース不足時の縮小比率（デフォルト1）です。flex-basisはアイテムのベースサイズを指定します。この3つを一括指定するのがflex省略形です。align-selfは個別アイテムのクロス軸整列を上書きします。orderはアイテムの並び順を変更します（デフォルト0、小さいほど前）。
よく使うFlexboxパターン集
水平中央揃え: justify-content: center。垂直中央揃え: align-items: center。水平・垂直の両方中央揃え（完全センタリング）: justify-content: center + align-items: center。アイテムを均等に分散: justify-content: space-between。左端に固定・右端に残りを詰める: 左側アイテムにmargin-right: autoを指定。これらのパターンはこのジェネレーターで実際に設定して確認できます。
Flexboxを使ったレイアウト設計のベストプラクティス
Flexboxは強力なツールですが、適切に使わないとスタイルが複雑になったり、予期しない挙動の原因になります。よくある落とし穴と回避策を解説します。
FlexboxとCSS Gridの使い分け
Flexboxは「アイテムのサイズに合わせてコンテナが伸縮する」1次元レイアウトが得意です。ナビゲーションメニュー・ボタングループ・カードの横並びなどに向いています。CSS Gridは「グリッド（格子）に従ってアイテムを配置する」2次元レイアウトが得意です。ページ全体の構造・ダッシュボード・複雑なカードグリッドにはCSS Gridが向いています。2つを組み合わせることも一般的で、グリッドでページ構造を定義し、Flexboxで各セル内のコンテンツを整列するパターンが多く見られます。
レスポンシブデザインとFlex
flex-wrap: wrapを設定することで、コンテナ幅が不足したときにアイテムが自動的に折り返します。各アイテムのflex-basisとmin-widthを組み合わせることで、画面幅に応じた自動折り返しレイアウトを作れます。例: flex: 1 1 300px; はアイテムのベースを300pxとし、スペースがあれば拡大・不足すれば折り返します。
アクセシビリティとFlexboxのorder
orderプロパティで視覚的な順序を変えることができますが、DOMの順序はそのままです。スクリーンリーダーやキーボードナビゲーションはDOM順に従うため、視覚と操作の順序が食い違うアクセシビリティ上の問題が生じます。デザイン上の並び替えはorderではなくDOMの並び順を変えることで対応することを推奨します。
よくある質問（FAQ）
- justify-contentとalign-itemsの違いは何ですか？
- justify-contentはメイン軸（flex-directionがrowのときは横方向）の整列を制御します。align-itemsはクロス軸（縦方向）の整列を制御します。flex-direction: columnにすると縦横が逆転し、justify-contentが縦方向、align-itemsが横方向の整列になります。
- flex-wrapを有効にしたときにalign-contentが必要になりますか？
- はい。flex-wrap: wrapで複数行になった場合、align-itemsは各行内のアイテムの整列に使われます。行全体のクロス軸方向の配置にはalign-contentを使います。単一行の場合はalign-contentは効果がありません。
- Flexboxはすべてのブラウザで使えますか？
- はい。Chrome・Firefox・Safari・EdgeなどすべてのモダンブラウザでFlexboxは完全にサポートされています。IE11も-ms-flexboxプレフィックスで部分対応していましたが、現在IE11のサポートを必要とするプロジェクトはほぼありません。
- FlexboxとCSS Gridの使い分けは？
- Flexboxは1次元レイアウト（横1列・縦1列のアイテム配置）に最適です。ナビゲーションバー・カードリストの横並び・フォームのラベル配置などに向いています。CSS Gridは2次元レイアウト（行と列の両方を制御）に最適で、ページ全体のレイアウトや複雑なグリッドデザインに使われます。
- flex: 1 とはどういう意味ですか？
- flex: 1 はflex-grow: 1・flex-shrink: 1・flex-basis: 0%の省略形です。フレックスアイテムが残りの利用可能スペースを均等に分け合って伸縮します。複数のアイテムにflex: 1を指定すると、コンテナの幅を等分した幅になります。
- gap プロパティはFlexboxで使えますか？
- はい。gap（旧grid-gap）はCSS GridだけでなくFlexboxにも使えます。Chromeは84以降、Firefox 63以降、Safari 14.1以降で対応しています。アイテム間の余白をmarginで制御する代わりにgapを使うと、端のアイテムにも余白がつかず便利です。
不具合や動作がおかしい点を見つけたら教えてください。
不具合報告はこちら →