ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】justify-contentの使い方や効かない原因を解説

【CSS】justify-contentの使い方や効かない原因を解説

2022/03/31

2024/11/28

display: flex;と justify-content を併用すれば、横並びの要素を均等に配置したり両端の要素を親要素の端にそろえたりできます。本記事ではjustify-content の基本的な使い方やうまく効かないときの原因についても解説しておりますので、ぜひ学習にお役立てください。

この記事で身につく内容

justify-contentとは
justify-contentの使い方
justify-contentが効かない原因

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

justify-contentとはflexアイテムの配置を指定するプロパティ
justify-contentの使い方
space-between - 両端揃え
justify-contentが効かない原因
まとめ

justify-contentとはflexアイテムの配置を指定するプロパティ

justify-content は、flexアイテムの配置を指定するプロパティです。左寄せ・中央寄せ・右寄せなどの配置や、flexアイテム同士の余白などを指定できます。

justify-content の余白は、主軸の方向（flexアイテムが並ぶ向き）につけられます。基本的に主軸は水平（横）方向ですが、flex-direction の値が column または column-reverse のときは垂直（縦）方向へと変化します。

参考記事

【CSS】flex-directionで要素を縦並び・横並びにする方法を解説

justify-contentの使い方

justify-content の値と使い方は以下のとおりです。

値	指定内容
flex-start / start	flexアイテムを左寄せにする（初期値）
flex-end / end	flexアイテムを右寄せにする
center	flexアイテムを中央寄せにする
space-between	flexアイテムを両端揃えにする
space-around	flexアイテムの両側の余白を均等にする
space-evenly	全てのflexアイテム間の余白を均等にする

まずは基本的な書き方を学習してみましょう。

基本書式

justify-content は、display: flex; で横並びにした要素の配置を指定するプロパティで、以下が基本形です。

.flexbox {
  display: flex;
  justify-content: 値;/*どのように配置するか指定する*/
}

justify-content と display: flex; はどちらも親要素（flexコンテナ）に指定しましょう。

flex-start / start - 左寄せ

justify-content: flex-start; は、横並びの要素を左寄せで配置する指定です。flex-start は初期値のため、指定しなくても左寄せで表示されます。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  justify-content: flex-start;/*左寄せで配置*/
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 10%;
}

60種類の動画で、HTML/CSSを学べる無料のスクール

ZeroPlus Gateの詳細を見る

受講できる人数は毎日先着制！

flex-end / end - 右寄せ

justify-content: end; は、横並びの要素を右寄せで配置する指定です。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  justify-content: flex-end;/*右寄せで配置*/
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 10%;
}

かめるん先生

これは「display: flex;」で横並びにした要素全てを右寄せにしたいときに使いますね！

center - 中央寄せ

justify-content: center; は横並びの要素を中央寄せで配置する指定です。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  justify-content: center;/*中央寄せで配置*/
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 10%;
}

かめるん先生

これは「display: flex;」で横並びにした要素全てを中央寄せにしたいときに使いますね！

space-between - 両端揃え

justify-content: space-between; は、横並びの要素を両端揃えで均等に配置する指定です。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  justify-content: space-between;/*両端揃えで配置*/
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 10%;
}

かめるん先生

これは「display: flex;」で横並びにした要素の最初の要素と最後の要素を両端に並べて、残りは均等の余白にしたいときに使います！横並びにした要素が2つしかないときは、それらが両端に並びますね！よく、headerのロゴとハンバーガーメニューの並びを指定するときに使用します！

space-around - flexアイテムの両側に均等な余白をつける

justify-content: space-around; は、それぞれの要素に均等な余白をつける指定です。要素同士の余白は両端の余白の2倍の大きさになります。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  justify-content: space-around; /*flexアイテムの両側に均等な余白*/
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 10%;
}

space-evenly - すべての余白を均等につける

justify-content: space-evenly; は、すべての余白を均等にする指定です。こちらの指定では、両端を含めたすべての余白が同じ大きさとなります。

<div class="flexbox">
  <div class="flex-item">①</div>
  <div class="flex-item">②</div>
  <div class="flex-item">③</div>
  <div class="flex-item">④</div>
  <div class="flex-item">⑤</div>
</div>

.flexbox {
  display: flex;
  justify-content: space-evenly;/*すべての余白を均等に指定*/
}

.flex-item {
  background: orange;
  border: 1px solid #000;
  width: 10%;
}

space-aroundとspace-evenlyの違い

space-aroundとspace-evenlyとは配置方法がやや似ているため、違いを整理します。

space-around：それぞれの要素に均等な余白をつける指定です。要素同士の余白は両端の余白の2倍のサイズです。

space-evenly：すべての余白を均等にする指定です。こちらの指定では、両端を含めたすべての余白が同じサイズです。

これを図で示すと以下のようになります。

このようにspace-aroundとspace-evenlyは、互いにそれぞれのflexアイテムの周囲に余白を入れる指定ながらも、配置方法は異なります。違いを整理して使い分けるようにしましょう。

30日間でHTML/CSSが身に付く無料プログラミングスクール

ZeroPlus Gateの詳細を見る

受講できる人数は毎日先着制！

justify-contentが効かない原因

なぜかjustify-content が効かない主な原因を紹介します。

display: flex; の指定を忘れている
子要素に margin: auto; を指定している
before・after を使用している
子要素のテキストを中央寄せにしようとしている

display: flex;の指定を忘れている

justify-content は display: flex; とセットで使用します。そのため、display: flex; の指定がなければ justify-content は効きません。

ありがちなパターンとして、子要素にdisplay: inline-block; を指定すれば、親要素にdisplay: flex; を指定した時と同じように一見横並びになります。ただしこの場合、親要素にjustify-content: center; を指定したとしても要素は中央に配置できません。

justify-content は display: flex; がセットで使われているか必ず確認しましょう。

See the Pen justify-content display: flex;を指定していない by ZeroPlus (@zeroplus-programming) on CodePen.

かめるん先生

このミスはかなり多いです💦

効かないときはまず、「display: flex;」と一緒に使っているのか確認しましょう！

子要素にmargin: auto;を指定している

全体的な配置を中央寄せに、display: flex; で横並びにした要素を右寄せにしたい場合、margin: auto; を使用していると justify-content が効きません。margin: auto; はフレックスボックスで特別な役割を持つためです。

フレックスアイテムに margin: auto; を指定すると、その余白が可能な限り拡張され、親要素内の空きスペースを埋めるように計算されます。結果、子要素の配置が justify-content ではなく margin によって制御されるため、justify-content の指定が無視されるような挙動になるのです。

See the Pen justify-content　margin: auto; by ZeroPlus (@zeroplus-programming) on CodePen.

疑似要素::before, ::afterを使用している

::before や ::after などの擬似要素を使用していると、justify-content の配置が思うようにいかないことがあります。

display: flex; は子要素に影響を与えるプロパティです。::before や ::after などの擬似要素は子要素に含まれるので、display: flex; の影響を受けます。このため、擬似要素に指定した要素の配置がずれてしまいます。

See the Pen justify-content　before by ZeroPlus (@zeroplus-programming) on CodePen.

このようなときは、子要素に ::before や ::after を指定すれば display: flex; の影響を受けずに要素の配置を指定できます。

See the Pen justify-content 擬似要素 before by ZeroPlus (@zeroplus-programming) on CodePen.

60種類の動画で、HTML/CSSを学べる無料のスクール

ZeroPlus Gateの詳細を見る

受講できる人数は毎日先着制！

子要素のテキストを中央寄せにしようとしている

横幅がある子要素のテキストを中央寄せにしたいと考える場合、親要素に justify-content を指定しても適用されません。

See the Pen justify-content　テキスト中央寄せになっていない by ZeroPlus (@zeroplus-programming) on CodePen.

子要素自体は中央寄せにできていますが、子要素の中に含まれるテキストについては中央に寄せられていません。このようなときは、子要素に display: flex; と justify-content: center; を指定するとテキストを中央寄せにできます。

See the Pen justify-content 中央寄せ by ZeroPlus (@zeroplus-programming) on CodePen.

また、子要素に高さがある場合は、align-items: center; を指定することでテキストの上下中央寄せが可能です。justify-content と align-items を同時に指定すれば、上下左右中央寄せにできます。

まとめ

justify-content は display: flex; とセットで使用して、横並びにした要素の並び方を指定するプロパティです。flexアイテムを左右中央に寄せるのみならず、均等に余白を設定して並べることもできます。justify-contentに指定できる値と、配置については以下の図でおさらいしましょう。

またjustify-contentが効かないケースがいくつかあるため、しっかり押さえておきましょう。