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

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

2022/03/31

2024/11/21

Web制作をしていると、要素を横並びにするレイアウトをよく使います。そこで「横並びにした要素を均等に配置したい」「両端の要素を親要素の端に揃えたい」などと思うことはありませんか？

そのようなレイアウトを作成するには、display: flex;と justify-content を併用します。を使いこなすと、下記画像のようなレイアウトを瞬時に作ることができるようになります。この記事では、justify-content の使い方を解説します。基本的な使い方だけでなく justify-content が効かない原因についても解説しておりますので、ぜひ学習にお役立てください。

この記事で身につく内容

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

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

この記事で紹介している justify-content は、flexbox で使用するプロパティです。flexbox を使いこなすには、一つのプロパティだけでなく全体的に学習していくことが大切です。

flexboxについては、こちらの記事で詳しく解説しています。flexboxプロパティにはどんなものがあるかを学習して、効率よくCSSのレイアウト作成を行えるようになっていきましょう。

【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

justify-contentとは
justify-contentの使い方
space-between - 両端揃え
- space-around - flexアイテムの両側に均等な余白をつける
- space-evenly - すべての余白を均等につける
justify-contentが効かない原因
まとめ

justify-contentとは

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

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

主軸については、flex-direction プロパティを学習すると理解しやすくなります。flex-direction はこちらの記事で解説していますので、併せて読んでみてください。

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

justify-contentの使い方

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

justify-contentの値と使い方

flex-start / start：左寄せ（初期値）
flex-end / end：右寄せ
center：中央寄せ
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%;
}

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%;
}

justify-contentが効かない原因

横並びにした要素を中央寄せや両端揃えにしたいのに、「 justify-content が効かない！」という状態になってしまうことはよくあります。学習に詰まってしまわないように、主な原因を確認しておきましょう。

以下は justify-content が効かないおもな原因です。

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

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

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

例えば display: inline-block; で要素を横並びにしているときに justify-content を指定しても効果がないので、横並びにしている方法を見直してみましょう。

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

かめるん先生

このミスはかなり多いです💦効かないときはまず、「display: flex;」と一緒に使いっているのかを確認しましょう！

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

全体的な配置を中央寄せに、display: flex; で横並びにした要素を右寄せにしたい場合、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.

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

子要素に横幅があり、テキストを中央寄せにする場合、親要素に 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; で横並びにした要素の並び方を指定するプロパティです。中央配置や右寄せだけでなく、均等に余白を設定する並べ方も可能です。Web制作において、レイアウトを整えることは欠かせません。レイアウトの作成で困らないよう、justify-content を使いこなせるようになりましょう。

justify-contentまとめ