配置を選ぶだけでFlexboxのCSSを生成します。justify-content と align-items の組み合わせを、プレビューで確かめながら決められます。
主なプロパティ
混乱しやすいのは、flex-direction を column にすると justify-content と align-items の担当方向が入れ替わる点です。「主軸＝方向に沿った軸」と覚えると整理できます。
| プロパティ | 役割 |
|---|---|
| flex-direction | 並べる方向（row / column） |
| justify-content | 主軸方向の配置（横並びなら左右） |
| align-items | 交差軸方向の配置（横並びなら上下） |
| gap | 要素同士の間隔 |
| flex-wrap | 折り返すかどうか |
よく使うパターン
/* 中央寄せ */ display: flex; justify-content: center; align-items: center; /* 左右に振り分け（ヘッダーのロゴとメニュー） */ display: flex; justify-content: space-between; align-items: center; /* 折り返すカード一覧 */ display: flex; flex-wrap: wrap; gap: 16px;
FlexboxとGridの使い分け
1方向の並び（横一列・縦一列）はFlexbox、行と列の両方をそろえる格子状のレイアウトはGridが向いています。カードを均等に並べる場合、行ごとの高さをそろえたいならGridのほうが簡単です。
よくある質問
Q 上下中央に寄せるには？
display: flex; align-items: center; を指定します。左右も中央にするなら justify-content: center; を加えます。
Q gapとmarginはどちらを使うべき？
要素間の間隔にはgapが簡潔です。最後の要素の余白を打ち消す処理が不要になります。
Q 折り返したいときは？
flex-wrap: wrap を指定します。指定がないと、要素が縮んで1行に収まろうとします。
Q FlexboxとGridはどう使い分けますか？
1方向の並びはFlexbox、行と列をそろえる2次元レイアウトはGridが向いています。