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

【CSS】justify-contentの使い方や効かない原因を解説 | ZeroPlus Media
zero-plus.io

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

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

この記事で身につく内容

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

関連記事

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

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

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

目次CLOSE

justify-contentとは
justify-contentの使い方
space-between – 両端揃え
1. space-around – flexアイテムの両側に均等な余白をつける
2. 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%;
}

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

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

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 を指定しても効果がないので、横並びにしている方法を見直してみましょう。

CodePen Embed - justify-content display: flex;を指定していない

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

全体的な配置を中央寄せに、display: flex; で横並びにした要素を右寄せにしたい場合、margin: auto; を使用していると justify-content が効きません。

これは margin による余白が先に与えられ、justify-content はそのあとで計算されるためです。

CodePen Embed - justify-content　margin: auto;

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

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

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

CodePen Embed - justify-content　before

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

CodePen Embed - justify-content 擬似要素 before

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

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

CodePen Embed - justify-content　テキスト中央寄せになっていない

このようなときは、子要素に display: flex; と justify-content: center; を指定するとテキストを中央寄せにできます。

CodePen Embed - justify-content 中央寄せ

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

まとめ

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

justify-contentまとめ