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

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

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

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

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

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

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

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

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

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

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

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

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

これで解決です。

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

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

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