Flexbox組み立て

親要素の並べ方とアイテムごとの伸び縮みを決めると、実際の Flexbox で表示して、そのまま使える CSS を書き出します。

プリセット

親要素（コンテナ）の設定

gapアイテムどうしのすき間。外側の余白は増えません。
min-height親の最低の高さ。縦の揃えを試すには高さが必要です。0で指定なし。

プレビュー（アイテムを押すと個別に設定できます）

アイテム数

アイテムの設定

CSS


      

    

  

  
プレビューは実際の Flexbox で描いています（アイテムは縦の揃えが見えるよう、高さに差をつけています）。CSS には初期値と異なる指定だけを書き出します。order は見た目の順だけを変えるので、読み上げやキーボード操作の順は HTML の順のままです。ブラウザごとの細かな差は MDN などで確認してください。





Flexbox組み立てでできること
CSS の Flexbox を、ボタンと数値で組み立てて実際の動きを見ながら確かめる道具です。ナビやカード並びの CSS を手早く作りたいときや、各プロパティの違いを覚えたいときに使えます。
使い方
  1. 「プリセット」から中央揃え、ナビ、カード折り返し、フッター下寄せのどれかを選ぶと、近い形から始められます。
  2. 「親要素（コンテナ）の設定」で flex-direction、flex-wrap、justify-content、align-items、align-content をボタンで選び、gap と min-height を数値で入れます。
  3. 「アイテム数」の − と ＋ で項目を増減します。「表示幅」で狭い画面での見え方も確かめられます。
  4. プレビューのアイテムを押して選び、「アイテムの設定」で flex-grow、flex-shrink、flex-basis、order、align-self を変えます。
  5. 「CSSをコピー」で書き出した CSS を取り出します。親のクラス名も変えられます。
計算の仕組みと注意点
よくある質問
justify-content と align-items の違いは何ですか？
justify-content は主軸の方向、align-items は交差軸の方向の揃え方です。flex-direction が column だと主軸が縦に変わります。プレビューの上に今の主軸と交差軸を表示しています。
要素を上下左右の中央に置くにはどうしますか？
親に display: flex を指定して、justify-content と align-items を center にします。親に高さがないと縦の中央は見た目に変わりません。プリセットの「中央揃え」で確かめられます。
フッターをページの一番下に置くにはどうしますか？
親を flex-direction: column にして高さを取り、本文に flex-grow: 1 を指定します。プリセットの「フッター下寄せ」がこの形です。実際のページでは min-height を 100vh にします。
align-content が効かないのはなぜですか？
折り返した行全体を動かす指定なので、flex-wrap が nowrap だと効きません。flex-wrap を wrap にして、min-height で親に余白を作ると動きが見えます。