正方形をjustify-content: space-betweenで均等に並べる（複数列対応）

こんにちは、display:flexが大好きなくしだです。

複数の要素を均等に並べたいときってよくありますよね。

そういうときjustify-content: space-betweenを使うことが多いのですが、よく知らずに使うと表示が崩れることがあります。

See the Pen
Untitled by kushi (@kushi95)
on CodePen.

このように列の数に対して要素の数が足りていないとき、足りない分の余白を取ってしまうのです。
他は綺麗に並んでいるのに最後の行だけぇぇぇってなってしまわないために、そういう場合を想定して記述する必要があります。

See the Pen
Untitled by kushi (@kushi95)
on CodePen.

この通りです。
追加した記述は以下です。

親要素に対して、

1. &::before {
2.     content: “”;
3.     display: block;
4.     width: 18%;
5.     order: 1;
6. }
7. &::after {
8.     content: “”;
9.     display: block;
10.     width: 18%;
11. }

疑似要素を二つ作り、beforeの順番をorder:1で入れかえることにより最後に二つ子要素が常にある状態になります。
高さが無いので下に変な余白が生まれることもありません。
widthの値は他と合わせておけば大丈夫です。

4列表示までは、これだけで大丈夫なのですが、5列以上の場合は最後に空の要素を付け加えてください。

1. <div class=”box box-empty”></div>

.box-emptyに対してheight:0;のスタイルを当てて高さを消しています。
先ほどの疑似要素と同じ要領です。
また列が増えたらさらに空の要素を追加することで対応できます。