CSS FLEXBOX

Flexboxジェネレーター

CSS Flexboxの配置を画面で確認しながら作成できます。flex-direction、justify-content、align-items、wrap、gapや、子要素ごとのgrow・shrink・basis・orderを調整してCSSをコピーできます。

設定はブラウザ内だけで処理され、保存・外部送信されません。

GENERATOR

配置を設定してCSSを作成

コンテナ設定とItem設定は変更と同時にプレビューへ反映されます。

プリセット

コンテナ設定

主軸、交差軸、折り返しと間隔を設定します。

表示形式主軸方向（flex-direction）折り返し（flex-wrap）主軸方向の配置（justify-content）交差軸方向の配置（align-items）複数lineの配置（align-content）

align-contentは複数のflex lineがある場合に効果があります。現在はnowrapのためCSS出力から省略します。

要素間の間隔同じ間隔を使う（gap）

gap（0〜200px） row-gap（0〜200px） column-gap（0〜200px）

gapはItem・flex line間のgutterです。margin、paddingや余白分配によって、見た目の空間がさらに増えることがあります。

プレビューサイズ

幅（240〜1200px）高さ（160〜800px）

プレビューサイズもCSSへ含める

子要素設定

Item 1を編集中

order（-100〜100） flex-grow（0〜100） flex-shrink（0〜100） flex-basisの種類 flex-basisの数値（0〜2000） align-self

flex-growは余剰空間の分配factor、flex-shrinkは空間不足時の縮小factorです。flex-basisはflex sizingで使う初期main sizeで、単純な最終幅ではありません。

リアルタイムプレビュー

Itemをクリックすると、そのItemを編集できます。

生成CSS・HTML

初期値から変更したItemだけ、Item CSSを追加します。

Container CSS

Container＋Item CSS

HTML例

Flexboxとは？

Flexboxは、主軸と交差軸に沿ってflex itemを配置・サイズ調整する1次元のCSSレイアウトモデルです。flex-directionによって主軸が決まり、justify-contentは主軸方向、align-itemsは交差軸方向へ働きます。そのため「justify-contentは常に横」「align-itemsは常に縦」ではありません。

本ツールはW3C CSS Flexible Box Layout Module Level 1に基づく主要プロパティを扱います。

主軸・交差軸と折り返し

rowは主軸方向へ通常順、row-reverseはその向きを反転します。columnとcolumn-reverseは縦方向を主軸にします。writing modeの影響があるため、reverseを単純に「右から左」と固定して考えないことが大切です。

nowrapは基本的に1本のflex line、wrapは必要に応じて複数lineへ折り返し、wrap-reverseは折り返す交差方向を反転します。align-contentは複数lineの交差軸方向の配置なので、1 lineでは効果が見えません。

gap・grow・shrink・basis

gap、row-gap、column-gapは、W3C CSS Box Alignment Module Level 3で定義されるgutterです。Flexboxにも適用でき、負値は使えません。

flex-growは利用可能な余剰空間をflex grow factorに応じて分配します。1と2を指定しても、Itemの最終サイズそのものが必ず1:2になるわけではありません。flex-shrinkは空間不足時の縮小factorで、flex base sizeなども計算に関係します。flex-basisはflex sizingで使う初期main sizeです。

reverse・orderとアクセシビリティ

row-reverse、column-reverseとorderは視覚的な表示順を変更しますが、DOMのソース順、読み上げ順、通常のキーボード操作順は変更しません。W3C仕様の注意に従い、論理的に正しいHTML順序の代替として使用しないでください。プレビューのItem番号とHTML例は、視覚順が変わっても元のDOM順を保ちます。

よくある質問

Flexboxとは？

主軸と交差軸に沿ってItemを配置するCSSの1次元レイアウトモデルです。

justify-contentとalign-itemsの違いは？

justify-contentは主軸方向、align-itemsは交差軸方向へItemを配置します。

横並びにするには？

通常はdisplay: flexとflex-direction: rowを使います。

縦並びにするには？

flex-direction: columnを選びます。

中央揃えにするには？

目的に応じてjustify-content: centerとalign-items: centerを設定します。

子要素を折り返すには？

flex-wrap: wrapを設定し、Item数やflex-basisを調整します。

要素間の余白はどう設定しますか？

同じ間隔ならgap、縦横を分けるならrow-gapとcolumn-gapを使います。

flex-grow・flex-shrinkとは？

growは余剰空間の分配factor、shrinkは空間不足時の縮小factorです。

flex-basisとは？

Flex sizingで使われるItemの初期main sizeです。

align-contentが効かないのはなぜですか？

nowrapや、折り返しても1 lineしかない状態では効果が見えないためです。

orderやreverseで読み上げ順も変わりますか？

変わりません。視覚順とDOM順が食い違う可能性があるため、正しいHTML順序の代替にしないでください。