CSS3のflexでspace-btweenを使うと最後の行で変になる

古いIEのサポートの切って、最近だと、flexを使う機会が多くなってきています。大変便利ですが、justify-contentのspace-betweenやspace-araoundを使って、4列とかにした時に、最後の行が、２、３個の要素しかない時に間がスカスカになったりしちゃいますよね。
こういう時だけは、左寄せにして欲しいんですがtext-align:justifyみたいなプロパティはないですし。

いつもは行がきっちり埋まるならいいけど、そうじゃないと使い所に困るなと思っていたんですが、「いや待てよ、誰か解決法を見出しているんじゃないか」と思って調べたらありました。さすがStackoverflow（笑）

How to align left last row/line in multiple line flexbox [duplicate]

要は、空っぽで高さ0の見えない要素を、リストの最後に（列数-1）個置いておけば、どんな数でも、左寄せになるというわけですね。StackOverflowのコメントでも言われていますが天才！

例えば、4列のレイアウトを作る時にいかのようなHTMLとCSSになってたとします。

<ul class="flex-4">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.flex-4 {
  display: flex;
  flex-wrap: warp;
  justify-content: space-between;
}
.flex-4 li {
  width: 24%;
  height: 60px;
  border: 1px solid #ccc;
}

これを以下のようにすると

<ul class="flex-4">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
</ul>

.flex-4 {
  display: flex;
  flex-wrap: warp;
  justify-content: space-between;
}
.flex-4 li {
  width: 24%;
  height: 60px;
  border: 1px solid #ccc;
}
.flex-4 li.empty {
  height: 0;
  border: none;
}

以下のような感じで、empty有りの方にliをいくら追加しても、最後の行は左寄せになってくれます。うーん、とっても便利。

See the Pen NwaKaN by Shunichi Fujita (@funnydreamer) on CodePen.