【CSS】flexboxで左右の端に要素を配置するjustify-contentの基本

2026/10/04

flexboxで左右の端に要素を配置したいときは、justify-contentを使うのが基本です。ナビゲーションメニュー、ボタンの並び、ヘッダー内のロゴとリンクの配置など、Web制作ではよく登場する場面です。まずは、「justify-contentは横方向の配置を決めるプロパティ」と理解すると分かりやすくなります。

justify-contentは主軸方向の配置を決める

flexboxでは、要素の並び方を「主軸」と「交差軸」で考えます。通常の横並びレイアウトでは、左から右が主軸になります。このときjustify-contentを使うと、子要素全体の配置を調整できます。

左右の端に要素を置きたい場合、よく使うのはspace-betweenです。これは、最初の要素を左端に、最後の要素を右端に配置し、その間の余白を均等に分配します。

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

この設定は、2つ以上の要素があるときに特に便利です。たとえば、左側にサイト名、右側にメニューを置きたい場合に使えます。

基本のHTMLとCSSの例

実際の書き方を見てみましょう。以下は、ヘッダー内で左右の端に要素を配置する例です。

<header class="site-header">
  <div class="logo">My Site</div>
  <nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #ddd;
}

.nav {
  display: flex;
  gap: 16px;
}

このコードでは、site-headerにdisplay: flexを指定し、justify-content: space-betweenでロゴとナビゲーションを左右に離しています。さらにalign-items: centerで縦方向を中央揃えにしています。

space-betweenが向いている場面

justify-content: space-betweenは、左右に要素を分けたいときに分かりやすい方法です。特に以下のような場面でよく使われます。

ヘッダーの左にロゴ、右にメニューを置く
カード内でタイトルと価格を左右に分ける
フッターでコピーライトとリンクを左右に並べる

ただし、要素が1つしかない場合は左右に分かれる相手がいないため、space-betweenの効果はほとんどありません。また、要素数が増えると間隔の見え方が変わるので、配置したい内容に合っているか確認することが大切です。

よく使う他の値との違い

左右の端に置きたいときはspace-betweenが便利ですが、他の値も知っておくと使い分けやすくなります。

.box {
  display: flex;
  justify-content: flex-start; /* 左寄せ */
}

.box-center {
  display: flex;
  justify-content: center; /* 中央寄せ */
}

.box-end {
  display: flex;
  justify-content: flex-end; /* 右寄せ */
}

flex-startは左寄せ、centerは中央寄せ、flex-endは右寄せです。これらは「端に配置する」というより、「まとめてどこに寄せるか」を決める値です。左右の両端に振り分けたい場合は、やはりspace-betweenが基本になります。