CSSのflexboxレイアウトを組む

やりたいこと

flexboxは「横に並べて間隔を空けて垂直中央」の日常的な答えです。コンテナの6プロパティで実現でき、ライブで見るのが仕様を読み直すより速いです。

設定する

direction・wrap・justify-content・align-items・align-content・gapとデモ項目数を選びます。プレビューは即座に再配置され、出力CSSは見た目と一致します。

• justify-contentは主軸方向の間隔、align-itemsは交差軸の中央揃え — 最も混同されやすいペアです。
• align-contentは複数行に折り返した時だけ効きます。

具体例

ナビバー — ロゴ左・リンク右：flex-direction row、justify-content space-between、align-items center、gap 16。出力されるCSSはまさにそれです。

対応範囲

コンテナのプロパティのみで、項目ごとのflex grow/shrink/orderはありません。デモ項目は30個・gapは96pxまで。生成されるのはコンテナのCSSで、子要素のスタイルはそのままです。