MENU
新型コロナウイルス感染症(COVID-19)対策のため、教室に来ての授業は全面休止しております。※オンライン講座は随時受け付けております。

justify-content: space-betweenの最後の行だけは左寄せにしたい時の対処方法

2020 3/25
justify-content: space-betweenの最後の行だけは左寄せにしたい時の対処方法
目次

スペースを埋めたい!

こんなときありませんか?
justify-content: space-betweenをすると子要素の数によっては、4番と5番の間にスペースができてしまいます。
下の図のような状態です。

イメージするのはこの形

間があいてるのって、なんだか不自然ではないでしょうか。偶数の個数だったら問題なさそうですが、このためにコンテンツ内容を合わせるのは得策ではありません。内容の変更があるかもしれないですしね。
ということで、今回は疑似要素をつかった解決策をお伝えしたいと思います。

そもそも justify-content ってなに?

CSS3から使用できるレイアウト形式です。
親要素に display:flexを指定すると、使用できるプロパティがあります。その中の一つがjustify-content。

justify-contentは、水平方向の位置を指定できるプロパティです。下のように、5種類あります。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items

space-betweenは、最初と最後の子要素を両端に配置し、残りの子要素は均等になるように間隔を配置してくれます。
なので、空白ができるのは納得ですよね。

疑似要素をつかって、見えないハコをつくる

では、コードを書いてみましょう。

HTML

<div class="flex_box">
 <div class="box">コンテンツ内容</div>
 <div class="box">コンテンツ内容</div>
 <div class="box">コンテンツ内容</div>
 <div class="box">コンテンツ内容</div>
 <div class="box">コンテンツ内容</div>
</div>

CSS

.flex_box {
 width: 1000px;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}


.box {
 width: 300px;
 background: #fdfd64;
 margin-bottom: 3%;
 text-align: center;
 padding: 10% 0;
}

この状態では、スペースができてしまうので、親要素のdiv(flex_box)の疑似要素afterに見えないハコをつくります。

CSS

.flex_box {
 width: 1000px;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}


.box {
 width: 300px;
 background: #fdfd64;
 margin-bottom: 3%;
 text-align: center;
 padding: 10% 0;
}


.flex_box::after {
display: block;
content:"";
width: 300px;
}

左詰めになりましたね!
注意点は、疑似要素のハコの大きさは、子要素のハコ(ここではコンテンツ内容)と同じ幅にすること
でないと、均等に並ばなくなります。

なぜこうなるの?

疑似要素とは、 要素(タグとタグではさまれたもの)の直前か直後に要素ぽいものを挿入することでしたね。

今回は、親要素のdivにafterの疑似要素を入れて、見えないハコが存在していることになっています。
これにより、左詰めになったように見えるんですね。

コンテンツの個数が増えたときはどうなるの?

もし、コンテンツ数が変更になった場合も大丈夫です。
例えば、コンテンツが6個になったとき、疑似要素が繰り下がって、変なスペースができるのでは?と思われる方がいるかもしれません。
ご安心を。高さを指定していないので、下に要素を追加しても認識されないため、スペースはできないようになっています。

まとめ

いかがだったでしょうか?
疑似要素で見えないハコをつくるという方法で、今回は対応しました。ぜひ試してみてください。

この記事を書いた人

目次
閉じる