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

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

※わかりやすいように親要素の背景を薄い薄いグレーに塗ってます。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNdGYja" data-user="ks22498120k" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ks22498120k/pen/rNdGYja">
  Untitled</a> by K S (<a href="https://codepen.io/ks22498120k">@ks22498120k</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
このままだと左詰めなのはいいのですが、右側に余白が出来てしまいます。
このまま中央に寄せたい・・・。


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYWEPZv" data-user="ks22498120k" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ks22498120k/pen/zYWEPZv">
  Untitled</a> by K S (<a href="https://codepen.io/ks22498120k">@ks22498120k</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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は視覚的にわかりやすくするために入れたものなので本来は不必要です。

## 完成
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWEeeYQ" data-user="ks22498120k" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ks22498120k/pen/XWEeeYQ">
  Untitled</a> by K S (<a href="https://codepen.io/ks22498120k">@ks22498120k</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
これで完成です。
```
$('<div></div>').appendTo('.wrapper').addClass('container hidden').css({width:cWidth, height:cHeight , visibility:'hidden'});
```
先ほどは分かりやすくするために　backgroundColor:'#fafafa'　を指定していましたが、本来は見えないようにするために visibility:'hidden' を指定しています。

見えないcontainer要素がflex5の隣にいるおかげで余っているflex5が中央には来ません。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLKzPbd" data-user="ks22498120k" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ks22498120k/pen/yLKzPbd">
  Untitled</a> by K S (<a href="https://codepen.io/ks22498120k">@ks22498120k</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
画面幅を600pxに下げて2カラムにしてみました。これでもきちんと要素は中央に、余った要素も左詰めになっています。
<br><br>
ただし要素が縦1列になった場合は、一番下に余白が出来てしまうので
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZExXapg" data-user="ks22498120k" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ks22498120k/pen/ZExXapg">
  Untitled</a> by K S (<a href="https://codepen.io/ks22498120k">@ks22498120k</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

下のように画面幅に応じて display:none; を与えるようにしました。（下記コードでは、画面幅400px以下の時は、要素を表示しないようにしています。）
```
$(window).on('load resize', function(){
  var wrapWidth = $('.wrapper').width();
  if(wrapWidth <= 400){
    $('.wrapper').find('.hidden').css({display:'none'});
  }
});
```

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