justify-contentでFlexboxの配置を完全に理解しよう

CSSのjustify-contentプロパティは、Flexboxレイアウトで要素を水平方向にどう並べるかを制御するための重要なプロパティです。
ページデザインやカードレイアウト、ボタンの整列など、あらゆる場面で活躍します。

1 justify-contentとは？

Flexboxを使うと、親要素（コンテナ）の中に子要素を柔軟に配置できます。
このとき、水平方向の整列方法を指定するのが justify-content です。
指定できる主な値は以下の通りです。

2 基本構文

.flex-box {
  display: flex; /* Flexboxを有効化 */
  justify-content: center; /* 中央寄せ */
}

3 サンプルコード

以下の例では、Flexbox内の3つの要素を中央に配置しています。

<div class="flex-box">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

/* -----------------------------------------------------
 * justify-contentでFlexboxの配置を完全に理解しよう
 * ----------------------------------------------------- */

.flex-box  {
  display: flex; /** Flexboxを有効にする **/
  justify-content: center; /** 子要素を中央寄せ **/
  background: #e8f5e9; /** 背景を淡い緑に **/
  padding: 20px; /** 余白 **/
  gap: 10px; /** 要素間の間隔 **/
}

.flex-box .item {
  background: #66bb6a; /** 黄緑系のカード **/
  color: #fff; /** 白文字 **/
  padding: 15px 30px; /** 内側余白 **/
  border-radius: 8px; /** 角丸 **/
  font-weight: bold; /** 太字 **/
}

4 space-between と space-around の違い

「両端に余白がない」のが space-between、
「両端にも同じ余白がある」のが space-around です。
より均等に整列したいときは space-evenly が便利です。

5 実践での使い方

• ナビゲーションバー内のリンク整列
• カードレイアウトの等間隔表示
• ボタンやアイコンを中央に寄せたいとき
• スマホメニューで項目をバランス良く配置

6 完成イメージ方

7 まとめ

justify-contentはFlexboxの基本でありながら、デザイン全体のバランスを整える非常に重要なプロパティです。
center・space-between・space-evenly をうまく使い分けて、見やすく整ったレイアウトを作りましょう。