display: flex;などのFlexboxでjustify-contentプロパティを使用すると、主軸が水平(横)の場合は水平方向の配置を指定する事ができます。
今回は、justify-contentプロパティの使い方から効かない原因について解説していきます。
justify-contentプロパティとは
justify-contentプロパティはFlexbox内の主軸方向(通常は左から右の水平方向)の配置・間隔を指定できるプロパティです。
基本的には下記コードのようにdisplay: flex;などのFlexboxの指定と同時に指定するプロパティとなります。
div {
display: flex;
justify-content: center;
}上記例のように親要素に対して指定する事で、子要素が指定した方向に配置されます。(上記コードの場合は、水平方向に中央寄せに配置)
基本的に主軸が水平(横)の場合は先頭が左側となりますが、主軸の向きを定義するflex-directionプロパティで主軸を垂直(縦)方向にした場合は先頭が上となります。
justify-contentプロパティで指定できる値と使用例
justify-contentプロパティで指定出来る値と使用例は以下の通りです。
使用例のHTML・CSSは下記コードを共通で使用しています。(子要素には別途中央寄せなどのCSSを指定しています。)
<div class="flexbox">
<div>1</div>
<div>2</div>
<div>3</div>
</div>.flexbox {
display: flex;
}下記で解説する値の他にいくつかありますが、よく使用する値を解説していきます。
flex-start または start (初期値)
主軸方向に対して先頭に寄せる(水平方向では左側)
.flexbox {
justify-content: flex-start;
}flex-end または end
主軸方向に対して末尾に寄せる(水平方向では右側)
.flexbox {
justify-content: flex-end;
}center
主軸方向に対して中央に寄せる(水平方向では中央寄せ)
.flexbox {
justify-content: center;
}space-between
主軸方向に対して両端揃え
.flexbox {
justify-content: space-between;
}space-around
各flexアイテムの両端の余白を均等にして配置
.flexbox {
justify-content: space-around;
}space-evenly
すべてのflexアイテム間の余白を均等にして配置
.flexbox {
justify-content: space-evenly;
}効かない原因について
justify-contentプロパティの指定が効かない原因としていくつかありますので、効かない場合は以下を確認してみてください。
display: flex;の指定を忘れている
justify-contentプロパティを指定している要素(親要素)にdisplay: flex;を指定しているか確認してみてください。
意外と効かない原因としては多いかと思います。
子要素にmargin: 0 auto;を指定している
配置をする子要素に対してmargin: 0 auto;やmargin: auto;などを指定している場合はjustify-contentプロパティは効きません。
親要素に疑似要素(::beforeまたは::after)を使用している
justify-contentプロパティを指定している要素(親要素)に疑似要素(::beforeまたは::after)を使用している場合、疑似要素も子要素に含まれてしまいますので、思ったような配置にならない場合があります。
さいごに
いかがでしたでしょうか。
今回は、justify-contentプロパティでFlexbox内の要素の配置を指定する方法と効かない原因を解説しました。
Flexboxではよく使用するプロパティとなりますので、各値の特性を理解し使えるようになりましょう。
