web関連

フレックスボックス(Flexbox)で最後の要素を左詰めにする方法

フレックスボックス(Flexbox)で最後の要素を左詰めにする方法

フレックスボックスは便利だが、「justify-content: space-between;」で横並びにして5列や6列の更新コンテンツの時にどうしてもcssだけだと表示が崩れてしまい思うようにいかなかったので調べたときの備忘録

cssでフレックスボックスを左詰めにする方法

3列までであれば以下の疑似クラスをdisplay:flex;かけている親要素に指定すればしっかりと横並びになる。

.親要素名::after{
  content:"";
  display: block;
  width:32%; // 数値は子要素の幅に合わせる
}

cssで左詰めにする方法は有名ですが、これだと3カラムまでなら対応できるが4カラム以上になってくると対応しきれないのでjavascriptで対応します。

javascriptでフレックスボックスを左詰めにする方法

$(function() {

var $grid = $('親要素名'),
emptyCells = [],
i;

for (i = -2; i < $grid.find('子要素名').length; i++) {
emptyCells.push($('<div>', { class: '子要素名 is_empty' }));
}

$grid.append(emptyCells);
});

基本的には下記にある参考サイトを見てもらえればわかりやすいと思います。
1点だけi = -2;と変更していますが、上記コードは子要素がある分だけループを回すので5列の横並びで子要素が2つとか3つしかないと生成される空の要素がたりなくて表示が崩れるためi = -2;としています。

参考
https://qiita.com/QUANON/items/e14949abab3711ca8646

施工事例コンテンツとかだと数見せるために、5列とかのレイアウトで組んだりすると1つや2つしか行にコンテンツが無い時が必ずある。
「justify-content: space-between;」を使わないでmarginとかで間隔調整する方法もあったけど、しっくりこないのとcssのコードが汚くなるので嫌だったのでとても助かった。