【Labs】justify-content:centerで最後の行を左寄せ

こんにちは（・∀・）

Flexboxでjustify-content:centerを指定した要素の中央寄せで、最後に表示される行の要素は左寄せにしたい場合、どうしたらいい⁉️

justify-content:centerで左寄せ

Flexboxのjustify-contentの値centerを使って中央寄せにすると、最後に表示される行の要素も中央寄せになってしまいます。

.oya-youso {
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
}
  .oya-youso .ko-youso {
    border: 1px solid #ccc;
    width: 150px;
    min-height: 200px;
    margin: 10px;
    padding: 10px;
  }

こんな感じ...

Result
スマホでのご確認はこちらをどうぞ

しかし、最後の行は左寄せにしたいという場合、

どうしたらいいのか...

justify-contentの値centerは使わないで、値flex-startを使う方法はどうでしょうか⁉️

.oya-youso {
  display: flex;
  flex-wrap:wrap;
  /*justify-content: center;使わない*/
  justify-content: flex-start;/*こっち使う*/
  max-width: 510px;/*親要素に横幅を指定*/
  margin: 0 auto;/*親要素はこれで中央寄せ*/
}
  .oya-youso .ko-youso {
    border: 1px solid #ccc;
    width: 150px;
    min-height: 200px;
    margin: 10px;
    padding: 10px;
  }

親要素の横幅をmax-widthで指定してmarginで中央寄せにします。

Result
スマホでのご確認はこちらをどうぞ

しかし、これだと親要素の横幅が変わって子要素が次の行に送られると、左寄せになってしまいます。

親要素の横幅をmax-widthで決め打ちするのであれば、HTMLに空の子要素を配置するのはどうでしょう⁉️

ポイントはカラム数-1の空の子要素、5カラムなら4個の空要素をHTMLに配置します。

更に、横幅とmarginは他の子要素に合わせます。

/*子要素を3カラムにする場合*/
<section class="oya-youso-3">
<div class="ko-youso">
  <p>box1</p>
</div>
<div class="ko-youso">
 <p>box2</p>
</div>
<div class="ko-youso">
  <p>box3</p>
</div>
<div class="ko-youso">
  <p>box4</p>
</div>
<div class="empty-ko-youso"></div>
<div class="empty-ko-youso"></div>
</section>

/*子要素を3カラムにする場合*/
.oya-youso {
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  max-width: 510px;/*親要素に横幅を指定*/
  margin: 0 auto;/*親要素はこれで中央寄せ*/
}
  .oya-youso .ko-youso {
    border: 1px solid #ccc;
    width: 150px;
    min-height: 200px;
    margin: 10px;
    padding: 10px;
  }
  .oya-youso .empty-ko-youso {
    width: 150px;
    height: 0;
    background: pink;
    margin: 0 10px;
    padding: 0;
    }

/*子要素を4カラムにする場合*/
<section class="oya-youso-4">
<div class="ko-youso">
  <p>box1</p>
</div>
<div class="ko-youso">
 <p>box2</p>
</div>
<div class="ko-youso">
  <p>box3</p>
</div>
<div class="ko-youso">
  <p>box4</p>
</div>
<div class="ko-youso">
  <p>box5</p>
</div>
<div class="empty-ko-youso"></div>
<div class="empty-ko-youso"></div>
<div class="empty-ko-youso"></div>
</section>

/*子要素を4カラムにする場合*/
.oya-youso {
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  max-width: 680px;/*親要素に横幅を指定*/
  margin: 0 auto;/*親要素はこれで中央寄せ*/
}
  .oya-youso .ko-youso {
    border: 1px solid #ccc;
    width: 150px;
    min-height: 200px;
    margin: 10px;
    padding: 10px;
  }
  .oya-youso .empty-ko-youso {
    width: 150px;
    height: 0;
    background: pink;
    margin: 0 10px;
    padding: 0;
    }

するとこんな感じで中央寄せの左寄せになります。

Result
スマホでのご確認はこちらをどうぞ

次のサンプルの様にJavaScriptで空要素を挿入すればHTMLに空要素を記述しなくてよくなります。

<section class="oya-youso-5">
<div class="ko-youso">
  <p>box1</p>
</div>
<div class="ko-youso">
 <p>box2</p>
</div>
<div class="ko-youso">
  <p>box3</p>
</div>
<div class="ko-youso">
  <p>box4</p>
</div>
<div class="ko-youso">
  <p>box5</p>
</div>
<div class="ko-youso">
  <p>box6</p>
</div>
</section>

.oya-youso {
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  max-width: 850px;/*親要素に横幅を指定*/
  margin: 0 auto;/*親要素はこれで中央寄せ*/
}
  .oya-youso .ko-youso {
    border: 1px solid #ccc;
    width: 150px;
    min-height: 200px;
    margin: 10px;
    padding: 10px;
  }
  .oya-youso .empty-ko-youso {
    width: 150px;
    height: 0;
    background: pink;
    margin: 0 10px;
    padding: 0;
    }

$(function(){
var $container = $('.oya-youso-5');
var elm = "";
for (i = 1; i++ < 5;) {/*カラム数分繰り返す*/
//for (i = 1; i < $container.find('.ko-youso').length; i++) {
elm += '
';
}
$(".oya-youso-5").append(elm);
});

Result
スマホでのご確認はこちらをどうぞ

どのサンプルも空要素の高さ1pxを取っていますが、実際は0pxにしてください。

いかがでしたでしょうか、できれば親要素の横幅は100%で実現したいところでしたが、他に思いつきませんでした。

何かもっと良い方法ってありますか⁉️