フレックスボックス（Flexbox）で最後の要素を左詰めにする方法

cssでフレックスボックスを左詰めにする方法

3列までであれば以下の疑似クラスをdisplay:flex;かけている親要素に指定すればしっかりと横並びになる。

.親要素名::after{
  content:"";
  display: block;
  width:32%;　//　数値は子要素の幅に合わせる
}

cssで左詰めにする方法は有名ですが、これだと3カラムまでなら対応できるが4カラム以上になってくると対応しきれないのでjavascriptで対応します。

javascriptでフレックスボックスを左詰めにする方法

$(function() {

var $grid = $('親要素名'),
emptyCells = [],
i;

for (i = -2; i < $grid.find('子要素名').length; i++) {
emptyCells.push($('<div>', { class: '子要素名 is_empty' }));
}

$grid.append(emptyCells);
});

基本的には下記にある参考サイトを見てもらえればわかりやすいと思います。
1点だけi = -2;と変更していますが、上記コードは子要素がある分だけループを回すので5列の横並びで子要素が2つとか3つしかないと生成される空の要素がたりなくて表示が崩れるためi = -2;としています。

参考
https://qiita.com/QUANON/items/e14949abab3711ca8646