CSS フレックスボックス ジェネレーター

Flexboxは、項目を一方向（行または列）に並べ、余った空間を配分します。レイアウトの悩みの大半は、コンテナの5つのプロパティ、つまり flex-direction、flex-wrap、justify-content（主軸）、align-items（交差軸）、gapと、項目のflexショートハンドで解決できます。このジェネレーターは、そのルールと対応するHTMLを出力し、プレビューはお使いのブラウザが配置するため、各値が何をするのかを正確に確認できます。

使い方

1. 方向を選び、項目が次の行に折り返せるかどうかを決めます。
2. 主軸にはjustify-content、交差軸にはalign-itemsを設定します。
3. 間隔と項目の数を設定し、必要なら項目ごとにflexの値を指定します。
4. CSSとHTMLをコピーします。

計算式

display: flex; flex-direction; flex-wrap; justify-content; align-items; [align-content]; gap · 項目：flex: <grow> <shrink> <basis>

justify-contentは行または列の向きに沿って、align-itemsはそれと交差する向きに働きます。align-contentは項目が複数行に折り返すときだけ意味を持ちます。flex: 1は1 1 0%の省略形なので、flex: 1の項目どうしは空間を均等に分け合います。

計算例

flex-wrap: wrap、justify-content: space-between、align-items: centerで3つの項目があり、1番目にflex: 2 1 0%、3番目にflex: 1を指定すると、余った空間を1番目が2、3番目が1の割合で受け取り、2番目は本来の幅のままです。初期設定はgap: 12pxの単純な1行です。