単一行のときは中央揃え、複数行のときは左揃えになるflexbox

概要

• flexコンテナの横幅を超えたら折り返すタイプ（ flex-wrap: wrap ）のflexbox
• flexアイテムが単一行かつflexコンテナの幅いっぱいにならないときのみ中央揃えにする
  • justify-content: center は用いず、flex-startのままmarginで中央に寄せる

サンプルコード

See the Pen 1行のときのみ中央寄せになるflexbox by Yuki Osawa (@osawa__) on CodePen.

• SASSというかSCSSを使用
  • 素のCSSじゃなきゃいや！ っていう人はもったいないので今すぐSASSというかAltCSSの魅力を感じましょう
  • $items_per_row で1行におさまるflexアイテムの最大個数を指定
  • $item_horizontal_margin および $item_vertical_margin でflexアイテムのマージンを指定
  • $container_width でflexコンテナの幅を指定

いくぶんトリッキーな部分の解説

width: calc((100% - #{$item_horizontal_margin} * (#{$items_per_row} - 1)) / #{$items_per_row});

単に式の見通しが悪いという話ですが、要は
「100%からflexアイテムの個数マイナス1個ぶんのマージンを引いて、それからflexアイテムの個数で割る」
という処理です
※ CSSの calc() の中では #{$hoge} としてやらないとSASSの変数が展開されない点に注意

:first-child:nth-last-child(-n+#{$items_per_row - 1}) {
  margin-left: auto;
}

「最初の要素かつ、最後から数えて指定の個数未満でおさまる要素」
と言葉にしてもなおわかりにくいですが、要は
「（flexアイテムが）指定の個数未満であるときの最初の要素」
ということです
そこにmargin-left: autoを指定して、

:last-child:nth-child(-n+#{$items_per_row - 1}) {
  margin-right: auto;
}

「最後の要素かつ、最初から数えて指定の個数未満でおさまる要素」
つまり
「（flexアイテムが）指定の個数未満であるときの最後の要素」
にmargin-right: autoを指定することで中央揃えを実現しています

免責

• HTML、JS、およびflexboxの機能に関わらないCSSは超テキトーです
• Can I useと経験則によるとIE11以降OKっぽいですが、だめだったらごめんネ
• もっとイケてる実装あったらぜひ教えてください
• ネーミングセンスにまったく自信がないので自信あるひと教えてください

実のところ

• キモのコードを思いついたのはおれじゃなくて某友人
• リファクタリングして汎用コンポーネント……というかmixin化したのがおれ