Flexbox
2026-05-20 · 5 min read
Flexbox とは
Flexbox（Flexible Box Layout）は、1次元のレイアウトを効率よく組むためのCSSの仕組みです。横並び・縦並びどちらにも対応できます。
ℹ️
display: flex を親要素に指定するだけで子要素が flex アイテムになります。
基本の書き方
親要素に display: flex を指定します。
Box 1
Box 2
Box 3
主要プロパティ
justify-content（主軸方向）
横方向（主軸）の並び方を指定します。
flex-start：左寄せ（デフォルト）center：中央flex-end：右寄せspace-between：両端揃えで均等配置space-around：各要素の周りに均等スペース
align-items（交差軸方向）
縦方向（交差軸）の揃え方を指定します。
stretch：引き伸ばす（デフォルト）center：中央揃えflex-start：上揃えflex-end：下揃え
✅
よく使う組み合わせ：justify-content: center と align-items: center を同時に指定すると完全中央揃えになります。