等間隔に配置されるflexboxsのjustify-contentをpace-betweenに指定したときに、最後の行が両側に寄ってしまうのを左寄せにするための方法。


今日は天気悪いはずなのにむちゃくちゃ天気がいい。
雲一つない青空なんですが、出かける予定作っておいたらよかったかな・・・。

ホームページ作ってたらサムネイル画像とか並べたりすることありますよね。
こういうやつです。

ギャラリー

こうやって縦横に並べるのって出会うこと多いと思いますが、
ずっと昔はtableタグを使って並べていましたが、つい最近までは要素をfloat:leftとかで並べてました。
そして、さらに使いやすくなったflexboxというスタイルがCSS3から生まれました。
このflexboxを使えば、むちゃくちゃ簡単に縦横に要素を並べることができます。
それぞれの要素のサイズを好きに指定すれば、勝手に並べてくれるんだからすごい便利です。

flexboxについては
A Complete Guide to Flexbox
とか見るとよくわかります。
英語だけど図が入っていてわかりやすいです。
日本語が良ければ「flexbox」で検索したらいくらでも出てきます。

で、このflexboxのjustify-contentをspace-betweenで指定したら、
内部の要素を左右両端から均等に配置してくれる便利なスタイル。

space-between

これはとっても便利なんだけれど、
左右から均等に配置するというのが問題で、各行には同じ数だけ要素を入れておかないとこんな感じになる。

space-between

本当は、たぶんみんなこんな風にしたい。

space-between

そんなときの対処法を書きます。

やりかたはたくさんあるけれど、一番楽な方法

「flexbox 最後の行」とかで検索したら同じような悩みの人とその解決方法が出てます。
どれもすばらしい方法なんだけれど、どれも決め手に欠くというかスマートなものは見つかってないもよう。

で、そんな中で直感的でシンプルでわかりやすい方法を僕は使っています。
シンプルに空の要素を入れるっていう方法。

先ほどの図を実際にコードで書いたらこんな風になる。

See the Pen justify-content – space-between by Yoshimune (@hachidaime) on CodePen.

このままだと一番下の行が不細工なんでなんとかしたい。
ということで、まずはコンテンツが入っていない空のボックスを最後の行に入れて数を合わせる。

空のボックスには”item-empty”とかわかりやすいクラス名の指定を入れる。

flexbox

そして空の要素、つまり”item-empty”を入れた要素からはデザインスタイルを消せばよい。

See the Pen justify-content – space-between by Yoshimune (@hachidaime) on CodePen.

すごい簡単。
わかりやすいしこれでいいんじゃないかと思います。

レスポンシブ対応はどうするんだ?

今はレスポンシブデザインが主流です。
flexboxも例外じゃなく、画面のサイズが小さくなれば調整するでしょう。
スマホやタブレットのサイズでブレイクポイントを作って、
1列、2列と調整するでしょう。
そしたらこんな風にはみ出ちゃうね。

flexboxはみ出る

でも、これも簡単。
スマホやタブレットではみ出る部分にそれぞれクラスを設定しておいて、
mediaqueryでそれぞれのサイズになったときに消せばいいだけ。

flexboxレスポンシブ

これで解決です。

プログラムで自動生成しているときは?

だいたいこういった並びのものって、ブログ一覧とかギャラリーとかシステムを使て配置されることも多い。
いくつ表示されるか決まっていないときに、後ろに空の要素をいくつ追加するかなんてわからない。
なので、その場合はプログラムで空の要素を追加することになります。
一応PHPでの追加の例を書いておきます。

$arrayにデータが入っているとして、

<div class="flexboxlist">
	<?php
	foreach($array as $value){
		?>
	<div class="list_item"><?= $value; ?></div>
		<?php
	}
	for($i=0; $i<(5-count($array)%5); $i++){
		?>
	<div class="list_item item-empty"></div>
		<?php
	}
	?>
</div>

こんな感じです。
レスポンシブに対応するにはさらにコード入れないといけないですが。
その辺は今回は割愛。

僕はこれが一番わかりやすいのでこれでやってます。
これってい解決方法が決められないと、どれ選んだらいいかわからないっていう人はこの方法でいいんじゃないでしょうかね。
直観的でわかりやすいので、とっかかりこれっていうのでもいいと思います。
参考になればと思います。