Flexボックスで中央左寄せにする方法 JavaScriptを使用

1 対象コード

対象コード

CSS

<style>
  body{
  padding: 0 100px;
  }
  .container{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding-inline-start: 0;
  }
  .box{
  height: 100px;
  width: 100px;
  background: #333;
  margin: 10px;
  list-style: none;
  }
  .box.empty-box {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  }
</style>

<style>

body{

padding: 0 100px;

}

.container{

display: flex;

flex-flow: row wrap;

justify-content: center;

padding-inline-start: 0;

}

.box{

height: 100px;

width: 100px;

background: #333;

margin: 10px;

list-style: none;

}

.box.empty-box {

height: 0;

padding-top: 0;

padding-bottom: 0;

margin-top: 0;

margin-bottom: 0;

}

</style>

HTML

<body>
  <ul class="container">
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
  </ul>
</body>

<body>

</ul>

</body>

JavaScript

<script>
  var container = $('.container'),   
  emptyBoxs = [],
  i;
  // 子要素の数だけ空の子要素を追加。
  for (i = 0; i < container.find('.box').length; i++) {
    emptyBoxs.push($('<li>', { class: 'box empty-box' }));
  }
  container.append(emptyBoxs);
</script>