cssのflexで中央に寄せつつ、最後の行は左寄せにする





justify-contentについて

justify-content: centerを使って中央に寄せると最後の行に余った要素があると
中央によってしまう
かといって初期値のflex-startだと全体が左寄せになってしまう
他の方法でも良いが、flexはとても便利なのでflexboxだけで解決する方法を探していくと、
解決法がネットにあった

参考にさせていただいたサイト
Flexbox で全体を中央に配置しつつ最後の行を左揃えにする

解決方法としてはJavaScript (jQuery) を使い空の子要素で埋め、
左まで詰めるという方法

html

1
2
3
4
5
<div class="wrap">
    <div class="list">
        <img src="" alt="" width=”300”height="400"/>
    </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
  .wrap{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;

.list.is-empty {
  width:300px;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

js

1
2
3
4
5
6
7
8
9
var $grid = $('.wrap'),   
    emptyCells = [],
    i;


for (i = 0; i < $grid.find('.list').length; i++) {
    emptyCells.push($('<div>', { class: 'list is-empty' }));
}
$grid.append(emptyCells);

最後に

並べる数が変わっても、これで必要な空の部分を埋めてくれていて、余った長さの分は表示されていない
計算なしできれいに並べることができたが、cssだけでは不可能なのでjsを使わないのであれば,他の方法でやるほうが良い