jQueryでカラム数に関わらず左詰めにする

解決したい問題

よくある display:flex; で3カラムの横並びの配置の時、要素そのものは中央に配置したいけど余った要素は左詰めにしたい時の対処法。

※わかりやすいように親要素の背景を薄い薄いグレーに塗ってます。

See the Pen Untitled by K S (@ks22498120k) on CodePen.

このままだと左詰めなのはいいのですが、右側に余白が出来てしまいます。 このまま中央に寄せたい・・・。

See the Pen Untitled by K S (@ks22498120k) on CodePen.

justify-content:center; で中央ぞろえにしようとすると、今度は一番下の余った要素が中央に来てしまいます。

解決策

jQueryを使って、余った要素に見えない要素を挿入することで解決できます。

var cWidth = $('.contenter').width(),
    cHeight = $('container').height;

まずは見えない要素の幅と高さを他の要素と同じにするため.container要素の高さと幅を取得します。

$('<div></div>').appendTo('.wrapper').addClass('container').css({width:cWidth, 
height:cHeight , backgroundColor:'#fafafa'});

そして親要素の.wrapperに空のdiv要素を追加します。（これが見えない要素です）
その後、他のcontainer要素と同じようにcontainerクラスを付与。
最後にcssで先ほどのcWidthとcHeightで幅と高さを指定します。
backgroundColorは視覚的にわかりやすくするために入れたものなので本来は不必要です。

完成

See the Pen Untitled by K S (@ks22498120k) on CodePen.

これで完成です。 ``` $('

').appendTo('.wrapper').addClass('container hidden').css({width:cWidth, height:cHeight , visibility:'hidden'}); ``` 先ほどは分かりやすくするために　backgroundColor:'#fafafa'　を指定していましたが、本来は見えないようにするために visibility:'hidden' を指定しています。

見えないcontainer要素がflex5の隣にいるおかげで余っているflex5が中央には来ません。

See the Pen Untitled by K S (@ks22498120k) on CodePen.

画面幅を600pxに下げて2カラムにしてみました。これでもきちんと要素は中央に、余った要素も左詰めになっています。

ただし要素が縦1列になった場合は、一番下に余白が出来てしまうので

See the Pen Untitled by K S (@ks22498120k) on CodePen.

下のように画面幅に応じて display:none; を与えるようにしました。（下記コードでは、画面幅400px以下の時は、要素を表示しないようにしています。）

$(window).on('load resize', function(){
  var wrapWidth = $('.wrapper').width();
  if(wrapWidth <= 400){
    $('.wrapper').find('.hidden').css({display:'none'});
  }
});

注意

今回は3カラムのためこのような記載でしたが、4カラム以上となると他の方法で記載しなければなりません。