justify-content

Flexboxの中で、余った空間を使って項目を主軸方向に揃え、分配するプロパティ。3つの項目を動かし、位置と間隔の違いを比べられます。

遊んでみよう

Flexboxの主軸に沿って配置

123

normal

CSS

.element justify-content: normal;

値のパターン

主軸方向の配置 justify-content

justify-contentの構成要素

01main axis

主軸に沿って配置

Flexboxではflex-directionが主軸の向きを決めます。この教材では、左から右へ進む横方向で比べます。

02flex-start | center | flex-end

項目をひとまとまりにする

項目どうしを詰めたまま、余った空間の先頭・中央・末尾へまとめて配置します。

03space-between | space-around | space-evenly

余った空間を分配する

項目間だけ、各項目の周囲、すべて同じ間隔という3通りで、空間の配り方を変えます。

早見表

初期値はnormalです。Flexboxでは先頭にまとまるため、まずは配置する空間がある状態で代表値を比べます。

01normalレイアウト方式に任せる初期値

02flex-start主軸の先頭にまとめるFlexbox

03center主軸の中央にまとめる中央配置

04flex-end主軸の末尾にまとめるFlexbox

05space-between最初と最後を両端へ置く項目間は均等

06space-around各項目の両側へ空間を配る外側は半分

07space-evenly外側も項目間も同じにするすべて均等

よくある使い方

ナビゲーションを両端へ分ける

ロゴとメニューのような2つのまとまりを、コンテナーの先頭と末尾へ配置できます。

.nav { display: flex; justify-content: space-between; }

ボタンのグループを中央へ置く

ダイアログや案内の操作ボタンを、項目間の幅を保ったまま中央へまとめられます。

.actions { display: flex; gap: 12px; justify-content: center; }

ツールを右端へ寄せる

編集や共有などの操作だけを、横方向の末尾へひとまとまりに配置できます。

.toolbar { display: flex; justify-content: flex-end; }

ポイント

余った空間がなければ、配置は変わらない。

justify-contentは、内容が使わずに残した空間を配置・分配します。項目がコンテナーいっぱいに広がっている場合や、flex-growが空間を使い切った場合は変化が見えません。Flexboxではflex-directionが主軸を決め、gapは固定の項目間隔、justify-contentは残った空間の分配を担当します。Gridや段組みでは、インライン軸に沿ってグリッド全体や段を配置します。このプロパティは子要素へ継承されません。