CSS Flexbox Generator
Display Flex ジェネレーター
作りたい配置を選ぶだけで、display:flex のCSSをプレビュー付きで作成できます。細かいプロパティ名がわからなくても使えるように、よくある配置から選べる形にしました。
1まずは作りたい配置を選ぶ
2揃え方を調整する
横方向の揃え方
justify-content
縦方向の揃え方
align-items
横並びのとき、justify-content は横方向、align-items は縦方向の揃え方です。
3余白・折り返し・数を決める
細かい設定を開く
プレビュー
中央寄せのFlexbox
まずは左のプリセットを選ぶと、よくある配置をすぐ試せます。
生成CSS
サンプルHTML
補足：
justify-content は主軸方向、align-items は交差軸方向の揃え方です。縦並びにすると主軸が変わるため、横並びの時と効き方が変わります。