CSS Flexboxジェネレーター
ライブプレビューとコード生成付きでFlexboxレイアウトを作成するビジュアルプレイグラウンド
コンテナプロパティ
アイテムプロパティ
レイアウトプリセット
ライブプレビュー
生成されたCSS
使用例
コンテンツの中央配置
Flexboxを使用してコンテンツを水平・垂直に完璧に中央配置します。
サイドバーレイアウト
Flexboxでクラシックなサイドバー＋メインコンテンツレイアウトを作成します。
カードグリッド
折り返しと均等な間隔でレスポンシブなカードグリッドを構築します。
機能
ライブビジュアルプレビュー
プロパティを調整するとリアルタイムでFlexboxレイアウトが更新されます
使用可能なCSSコード
コンテナとアイテムの両方のクリーンでコピー可能なCSSコードを取得
レイアウトプリセット
中央揃え、サイドバー、ナビバーなどの一般的なレイアウトプリセットで素早く開始
アイテム個別コントロール
order、flex-grow、flex-shrink、align-selfなどの個別アイテムプロパティを設定
使い方
コンテナプロパティを設定
flex-direction、justify-content、align-items、flex-wrap、gapの値を選択します。
アイテムを調整
アイテム数を設定し、flex-growやorderなどの個別アイテムプロパティを設定します。
CSSをコピー
生成されたCSSコードをコピーしてプロジェクトで使用します。プリセットで素早くレイアウトを試しましょう。
CSSフレックスボックス チートシート
すべてのFlexboxプロパティのクイックリファレンス
コンテナプロパティ
| プロパティ | 値 |
|---|---|
display | flex | inline-flex |
flex-direction | row | row-reverse | column | column-reverse |
flex-wrap | nowrap | wrap | wrap-reverse |
flex-flow | |
justify-content | flex-start | flex-end | center | space-between | space-around | space-evenly |
align-items | stretch | flex-start | flex-end | center | baseline |
align-content | flex-start | flex-end | center | space-between | space-around | stretch |
gap | |
row-gap | |
column-gap |
アイテムプロパティ
| プロパティ | 値 |
|---|---|
order | |
flex-grow | |
flex-shrink | |
flex-basis | |
flex | |
align-self | auto | flex-start | flex-end | center | baseline | stretch |
よくある質問
CSS Flexboxジェネレーターとは？
Flexboxジェネレーターは、Flexコンテナとアイテムのプロパティを設定して結果を即座に確認できるビジュアルプレイグラウンドです。justify-content: space-betweenが実際にどう見えるか、もう推測する必要はありません。調整して、プレビューして、CSSをコピーするだけです。
主な機能
flex-direction、wrap、justify-content、align-items、gapなどのコンテナプロパティを完全制御。アイテムごとにorder、grow、shrink、basis、align-selfを個別設定。ワンクリックで始められるレイアウトプリセット（中央配置、サイドバー、Holy Grail、ナビバー、カードグリッド、フッター）。
よくある使用例
コンテンツの上下左右中央配置、ナビゲーションバーの構築、折り返し付きレスポンシブカードグリッドの作成、クラシックなサイドバーレイアウトの構成。Flexboxはこれらのパターンを最小限のCSSでエレガントに処理します。
ヒント
プリセットから始めて微調整しましょう。Flexアイテム間のマージンの代わりにgapを使うとコードがきれいになります。レスポンシブデザインではflex-wrap: wrapが頼もしい味方です。
プライバシー
すべてブラウザ内で動作します。レイアウトデータがお使いのマシンから外に出ることはありません。
CSS FlexboxとGrid: どちらのレイアウトシステムを使うべきか
FlexboxとGridの違いは1次元対2次元です。どちらを使っているかを知れば、選択は明らかになります。