【サンプルデモ】justify-content:centerで左寄せ

ブラウザサイズを変えて確認してください。

 

初期値3カラムレイアウト

親要素の横幅指定あり、親要素を中央寄せ、子要素の横幅150px。

子要素が改行すると中央に配置される。

HTMLに空の要素を2つ配置。

最初の一行目に子要素が3つ無いと空要素が2つあるため左寄せのように見える。

box1

box2

box3

box4

 

初期値4カラムレイアウト

親要素の横幅指定あり、親要素を中央寄せ、子要素の横幅150px。

子要素が改行すると中央に配置される。

HTMLに空の要素を3つ配置。

最初の一行目に子要素が4つ無いと空要素が3つあるため左寄せのように見える。

box1

box2

box3

box4

box5