始めに
flexboxで中央寄せにする場合は justify-content: centerを使うと思いますが、これを使うと以下のように下の部分も中央に並んでしまいます。
これを以下のように全体は中央に揃えつつ、下の部分はきちんと左から並べるようにする方法を紹介したいと思います。
やり方
やり方は単純で、ラッパーとなるflexboxの幅をアイテムが入るギリギリの幅にし、中央寄せにします。
例えばアイテムの幅が120pxの場合、4カラムを表示するには480px必要になります。この時ラッパーの幅を480pxにしてmargin: 0 autoでラッパーを中央寄せにしたら左から並べつつ全体を中央に寄せられます。
5カラムを表示するには600px必要になるので、600pxからはラッパーの幅を600pxにすればいいです。
.flex-center {
display: flex;
margin: 0 auto; // ブロック全体を中央寄せになるように設定
flex-wrap: wrap;
// 4カラム表示のためのサイズ設定
@media only screen and (min-width: 480px) {
max-width: 480px;
}
// 5カラム表示のためのサイズ設定
@media only screen and (min-width: 600px) {
max-width: 600px;
}
}
図で表すとこんな感じになります（この図で伝わるか微妙ですが・・・）
ここまで書いて後はなんとなくわかってきたと思いますが、後は表示したいカラム数ぶんだけ書いていけばいいです。CSSで書くと大変ですが、SCSSですとmixinとループが使えるので、割と簡単にできます。
このやり方の場合、途中でカラム数に限界がきてしまいますが、大体のサイトはmax-widthを設けて中央寄せにすると思うので問題ないと思います。
// カラムが収まる幅になるように段階的に調整する
// $column-width: 1カラムの幅
// $max-column: 最大カラム数
@mixin flex-fitting($column-width, $max-column) {
@for $i from 1 through $max-column {
@media only screen and (min-width: $i * $item-width) {
max-width: $i * $item-width;
}
}
}
.flex-center {
display: flex;
margin: 0 auto;
flex-wrap: wrap;
@include flex-fitting(120px, 10);
}
終わりに
中央寄せをしつつ中身は左寄せというのは方法がなかなか思いつかなかったのですが、SCSSを駆使すれば比較的簡単に実装することができました。他の人も色々考えているようで、JSや擬似要素を使って空の要素を入れるやり方もありました（参考サイトにリンクを貼りました）。
今回の内容のサンプルコードをCodePenで書いたので、実装の詳細はこちらを参考にしてみてください。
See the Pen flex centering by wintyo (@wintyo) on CodePen.