justify-content を理解すると「横方向の配置」が思い通りになる
justify-content は Flexbox の中でも、「子要素を横方向にどう並べるか」を決める超重要プロパティです。
ナビメニュー、ボタンの並び、カードの配置など、横並びレイアウトの“気持ちよさ”はほぼここで決まります。
ここでは、全パターンを CSS と Tailwind CSS 両方で、実際の見え方をイメージしながら整理していきます。
前提：justify-content が効く条件
Flexbox の「メイン軸」に対して効く
横並びの場合（flex-direction: row）
メイン軸は「横方向」なので、justify-content は横方向の揃え方を決めます。
縦並びの場合（flex-direction: column）
メイン軸は「縦方向」になるので、justify-content は縦方向の揃え方になります。
ここではまず「横並び（row）」を前提に話します。
.container {
display: flex;
flex-direction: row; /* 初期値なので省略可 */
}
Tailwind なら
<div class="flex">
...
</div>
パターン1：flex-start（左寄せ・デフォルト）
意味と使いどころ
一番左に詰めて並べる、初期状態の配置です。
「特に何も指定していない状態」がこれです。
CSS
.container {
display: flex;
justify-content: flex-start;
}
Tailwind
<div class="flex justify-start">
<button>ボタン1</button>
<button>ボタン2</button>
<button>ボタン3</button>
</div>
深掘りポイント
ナビゲーション、左寄せのボタン群、ラベル＋入力欄など、
「左から順に並べたい」場面の基本形です。
実務では「書かなくてもこうなる」ので、あえて指定するのは
「意図を明示したいとき」と覚えておくとよいです。
パターン2：center（中央寄せ）
意味と使いどころ
子要素全体を中央に寄せて配置します。
ダイアログのボタン、中央寄せのメニュー、ロゴ＋メニューなどでよく使います。
CSS
.container {
display: flex;
justify-content: center;
}
Tailwind
<div class="flex justify-center gap-4">
<button class="px-4 py-2 bg-blue-600 text-white rounded">OK</button>
<button class="px-4 py-2 bg-gray-200 rounded">キャンセル</button>
</div>
深掘りポイント
「全体を真ん中に寄せる」ので、左右に同じだけ余白ができます。
要素数が変わっても、常に“真ん中に固まっている”印象になります。
パターン3：flex-end（右寄せ）
意味と使いどころ
子要素を右端に寄せて並べます。
フォームの「キャンセル／保存」ボタン、テーブルの操作ボタンなど、
「右下にアクションをまとめたい」場面でよく使います。
CSS
.container {
display: flex;
justify-content: flex-end;
}
Tailwind
<div class="flex justify-end gap-2">
<button class="px-3 py-2 bg-gray-200 rounded">キャンセル</button>
<button class="px-3 py-2 bg-blue-600 text-white rounded">保存</button>
</div>
深掘りポイント
右寄せは「決定アクションを右側に置く」UIパターンと相性が良いです。
特にフォームやモーダルのフッターで頻出します。
パターン4：space-between（両端にくっつけて、間だけ均等）
意味と使いどころ
一番左の要素を左端、一番右の要素を右端にくっつけ、
その間の余白を均等に配分します。
CSS
.container {
display: flex;
justify-content: space-between;
}
Tailwind
<div class="flex justify-between">
<div>左</div>
<div>中央</div>
<div>右</div>
</div>
深掘りポイント
ヘッダーのレイアウトで
左にロゴ、右にメニュー
のような配置をするときに非常によく使います。
「両端にピタッとくっつく」という性質を覚えておくと、
ヘッダー・フッター・ツールバーの設計が一気に楽になります。
パターン5：space-around（前後に均等な余白）
意味と使いどころ
各要素の「前後」に同じ余白をつけます。
その結果、両端の余白は「中間の余白の半分」になります。
CSS
.container {
display: flex;
justify-content: space-around;
}
Tailwind
<div class="flex justify-around">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
深掘りポイント
見た目としては「全体的にふわっと散らばる」感じになります。
ただし、両端の余白が中間より小さいため、
「完全な均等配置」ではない点に注意が必要です。
「なんとなく真ん中に寄せつつ、少し広げたい」くらいのニュアンスで使うとしっくりきます。
パターン6：space-evenly（すべての間隔を完全に均等）
意味と使いどころ
左右の端も含めて、
全ての間隔を完全に同じにします。
CSS
.container {
display: flex;
justify-content: space-evenly;
}
Tailwind
<div class="flex justify-evenly">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
深掘りポイント
「端も含めて、全部きっちり均等にしたい」場合の最適解です。
メニュー項目、ステップ表示、アイコンの並びなど、
“きっちり感”を出したい UI に向いています。
space-between との違いは
両端に余白があるかどうか
ここを意識して使い分けると、デザインの印象が変わります。
まとめ表（感覚で選べるようにする）
ざっくり感覚で選ぶなら、こんなイメージです。
- 左に寄せたい → flex-start /
justify-start - 真ん中に固めたい → center /
justify-center - 右に寄せたい → flex-end /
justify-end - 両端にくっつけて間を広げたい → space-between /
justify-between - 全体的にふわっと散らしたい → space-around /
justify-around - 端も含めてきっちり均等にしたい → space-evenly /
justify-evenly
縦並び（flex-col）のときの justify-content
最後に一つだけ大事な視点。
flex-direction: column; のとき、justify-content は「縦方向の揃え方」になります。
Tailwind なら
<div class="flex flex-col justify-between h-96">
<div>上</div>
<div>中</div>
<div>下</div>
</div>
この場合は
上・真ん中・下にきれいに配置されます。
「今、メイン軸は横か？縦か？」
これを一瞬だけ意識できるようになると、
Flexbox はもう怖くなくなります。
