Flexboxの均等配置　完全攻略

要素を横並びにする際に大活躍するFlexbox。

特にspace-betweenやspace-aroundはmargin等の設定なしでも要素を均等配置してくれる優れものです。

しかしFlexboxにも弱点があります。

下記の様にカラム数からの端数が出てしまうと端数分の位置がおかしくなってしまいます。

ものすごくブサイクですね、、

flex-startにして隙間をmarginで設定すると解決しますが、その場合はコンテンツ幅から細かく計算しなければなりませんし、レスポンシブ対応も大変です、、

どうしたものか、、

対策= j-Queryで無理やりカラム数を合わしましょう。

私がたどり着いた結論です。要するに要素の総数がカラム数で割り切れる数ならばきれいに配置されるはずです。

その為のコードがこちら。

<div id="container">
     <ul class="box-list">
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
       <li class="box-item"></li>
     </ul>
   </div>

.box-list{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

.box-item{
 width:100px;
 height:100px;
 background:#00BADD;
 margin-bottom:10px;
}

.copy {//box数を合わせるための空の要素
 width:100px;
 height:100px;
}

$(function(){
 let emptyCells = [];//空の配列を作っておく
 let parentWidth = $(".box-list").width();//listの親要素の幅を取得
 let childWidth = $(".box-item").width();//list-itemnの幅を取得
 let column = parentWidth/childWidth;//親要素の幅を子要素の幅を割ったものがカラム数になる
 column = Math.floor(column) ;//カラム数の小数点切り捨て
 let count = $(".box-item").length;//list-itemの数を取得
 let number = count%column;//list-itemの数をカラムで割った余りを出す、余りの値が最後列の要素数になる。
 let need = column - number;//カラム数から最後列の要素数を引いたものが、必要な要素数になる。

 for (i = 0; i < need; i++) {
    emptyCells.push($('<li>', { class: 'copy' }));//必要分の空のlist-itemを配列に追加
 }

 $('.box-list').append(emptyCells);//list-itemの最後に空の要素を追加する。

});

上記コードの結果がこちら。

きれいに均等配置されましたね。

カラム数が増えても・・・

問題なしです。

このやり方が優れているところは要素の幅と親要素の幅さえ決まっていれば、j-Queryが計算してくれてカラム数が決まることです。

画面幅に合わして、設定する必要もありません。

是非一度お試しください。