justify-contentが効かない5つの原因と解決方法

justify-contentは横位置を調整するCSSです。

centerを指定すると中央寄せになりますし、space-betweenを指定すると両端寄せにできます。

でも思った位置になってない？ずれている？効いていない？

justify-content:space-betweenやjustify-content:centerが効かない原因と解決方法を5つ紹介します。

justify-contentの基本はこちら↓

【原因1】flexを指定していない

justify-contentはdisplay:flexとセットで使うCSSです。

左右中央揃えの方法などでよく紹介されているjustify-contentですが、display:flexが指定されていないと使えません。

【失敗例】中央寄せしたいのに効いてない

<style>
.example{
    /*コレが効いてない*/justify-content: center;
    border: 1px solid #999;
    background: #ffeb00;
}
.example>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example">
    <div>1</div>
</div>

【解決方法】

display:flexを指定しましょう。

displayがblockなどに書き変わっていないかもチェックしましょう。

<style>
.example2{
    /*コレを追加*/display: flex;
    justify-content: center;
    border: 1px solid #999;
    background: #ffeb00;
}
.example2>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example2">
    <div>1</div>
</div>

念のためflexが効かない原因も確認しておきましょう。↓

【原因2】marginを指定している

子要素に「margin:auto」など指定した上で「justify-content: flex-end（右寄せ）」をしようとしても中央寄せになってしまいます。

これはmarginが効いた後に残りの隙間でjustify-contentが計算され横位置が調整されるためです。

【失敗例】右寄せしたいのに中央寄せになる

<style>
.example3{
    display: flex;
    /*コレが効いてない*/justify-content: flex-end;
    border: 1px solid #999;
    background: #ffeb00;
}
.example3>div{
    /*コレが原因*/margin: auto;
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example3">
    <div>1</div>
</div>

【解決方法】

子要素のmarginを削除しましょう。

意図的な調整をしたい場合はautoではなく数値で指定しましょう。

<style>
.example4{
    display: flex;
    justify-content: flex-end;
    border: 1px solid #999;
    background: #ffeb00;
}
.example4>div{
    /*コレを削除margin: auto;*/
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example4">
    <div>1</div>
</div>

【原因3】beforeやafterがある

display:flexは子要素の位置調整をするCSSですが、beforeやafterも子要素に含まれます。

子要素をすべて含んで計算されるため思った位置になりません。

【失敗例】微妙に中央から右にずれている

<style>
.example5{
    display: flex;
    justify-content: center;
    border: 1px solid #999;
    background: #ffeb00;
}
.example5>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
.example5::before{
    content: "before";
    background: #f0a1a1;
}
</style>
<div class="example5">
    <div>1</div>
</div>

【解決方法】

beforeやafterを指定する必要がある場合はもう一つの要素で囲いましょう。

display:flexは孫要素までは影響がないためです。

<style>
.example6{
    display: flex;
    justify-content: center;
    border: 1px solid #999;
    background: #ffeb00;
}
.example6>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
.example6>div::before{
    content: "before";
    background: #f0a1a1;
}
</style>
<div class="example6">
    <div>1</div>
</div>

beforeやafterが不要な場合は「content:none」で消してしまいましょう。

【原因4】flex-direcion:columnで縦並びにしている

flex-direcionはflex内の子要素の方向と順番を指定するCSSです。

flex-direcion:columnを指定すると子要素が縦並びになります。

このときjustify-contentは縦方向の位置調整に変わります。

よってjustify-contentが効いていないように見えます。

【失敗例】中央寄せしたいのに効いてない

<style>
.example7{
    display: flex;
    /*コレが効いてない*/justify-content: center;
    /*コレが原因*/flex-direction: column;
    border: 1px solid #999;
    background: #ffeb00;
}
.example7>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example7">
    <div>1</div>
</div>

【解決方法】

align-itemsで位置調整しましょう。

align-itemsは本来縦の位置を調整するCSSですが、flex-direcion:columnで縦並びになっているときは横方向の位置調整になります。

<style>
.example8{
    display: flex;
    /*コレは不要justify-content: center;*/
    /*コレを追加*/align-items: center;
    flex-direction: column;
    border: 1px solid #999;
    background: #ffeb00;
}
.example8>div{
    width: 30%;
    box-sizing: border-box;
    padding: 10px;
    background: #b8dbf8;
}
</style>
<div class="example8">
    <div>1</div>
</div>

flex-direcion:columnの指定が意図的でないのなら削除またはflex-direction:rowを指定して横並びに戻すとjustify-contenが効くようになります。

【原因5】2行になっている

justify-content:centerは中央寄せするCSSですが、テキストが2行以上になったとき、左寄せになってしまいます。

【失敗例】2行目が左寄せになっている

<style>
.example9{
    width: 300px;
    display: flex;
    justify-content: center;
    border: 1px solid #999;
    background: #ffeb00;
}
</style>
<div class="example9">
    長いテキスト長いテキスト長いテキスト長いテキスト
</div>

【解決方法】

テキストが2行以上になる場合は「text-align:center」を指定することで中央寄せができます。

中央寄せしたいときは「text-align:center」と「justify-content: center」両方指定しておくといいでしょう。

<style>
.example10{
    width: 300px;
    display: flex;
    justify-content: center;
    /*コレを追加*/text-align: center;
    border: 1px solid #999;
    background: #ffeb00;
}
</style>
<div class="example10">
    長いテキスト長いテキスト長いテキスト長いテキスト
</div>

【まとめ】justify-contentが効かない原因と解決方法

• 【原因1】flexを指定していない
  display:flexを指定する
• 【原因2】marginを指定している
  子要素のmargin:autoを削除する
• 【原因3】beforeやafterがある
  beforeやafterが孫要素になるようにする
• 【原因4】flex-direcion:columnで縦並びにしている
  align-itemsで位置調整する
• 【原因5】2行になっている
  text-align:centerも指定する

以上、justify-contenが効かない原因と解決方法5選でした。