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 は、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 を指定しても効果がないので、横並びにしている方法を見直してみましょう。
子要素にmargin: auto;を指定している
全体的な配置を中央寄せに、display: flex; で横並びにした要素を右寄せにしたい場合、margin: auto; を使用していると justify-content が効きません。
これは margin による余白が先に与えられ、justify-content はそのあとで計算されるためです。
疑似要素::before, ::afterを使用している
::before や ::after などの擬似要素を使用していると、justify-content の配置が思うようにいかないことがあります。
display: flex; は子要素に影響を与えるプロパティです。::before や ::after などの擬似要素は子要素に含まれるので、display: flex; の影響を受けます。このため、擬似要素に指定した要素の配置がずれてしまいます。
このようなときは、子要素に ::before や ::after を指定すれば display: flex; の影響を受けずに要素の配置を指定できます。
子要素のテキストを中央寄せにしようとしている
子要素に横幅があり、テキストを中央寄せにする場合、親要素に justify-content を指定しても適用されません。
このようなときは、子要素に display: flex; と justify-content: center; を指定するとテキストを中央寄せにできます。
また、子要素に高さがある場合は、align-items: center; を指定することでテキストの上下中央寄せが可能です。justify-content と align-items を同時に指定すれば、上下左右中央寄せにできます。
まとめ
justify-content は display: flex; で横並びにした要素の並び方を指定するプロパティです。中央配置や右寄せだけでなく、均等に余白を設定する並べ方も可能です。Web制作において、レイアウトを整えることは欠かせません。レイアウトの作成で困らないよう、justify-content を使いこなせるようになりましょう。
justify-contentまとめ
- 横並びにした要素の並び方を指定するプロパティ
display: flex;と併用する- 位置による配置と均等な配置が可能
- 効かないおもな原因は「
display: flex;の記述忘れ」「margin: auto;」「擬似要素」「子要素に指定している」
コメント