【CSS】flexのspace-evenlyで最後の行を左寄せにする方法
flexのspace-evenlyは要素を適度に並べてくれるので便利なのですが，最後の行で表示が中央寄りになってしまいます。
これを左寄せにします。
空の要素を加える
この問題はCSSだけでは解決できないようですが，リストの最後に空の要素を追加すれば良いです。
body {
width: 400px;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
list-style-type: none;
}
.card {
width: 80px;
height: 150px;
margin: 0 4px;
background-color: gray;
}
.empty {
width: 80px; --> 表示したい要素と幅を揃える
height: 0px; --> 高さは 0px にする
margin: 0 4px;
}<ul>
<!-- 表示したい要素 -->
<li><div class="card">カード1</div></li>
<li><div class="card">カード2</div></li>
<li><div class="card">カード3</div></li>
<li><div class="card">カード4</div></li>
<li><div class="card">カード5</div></li>
<!-- 空の要素 -->
<li><div class="empty"></div></li>
<li><div class="empty"></div></li>
<li><div class="empty"></div></li>
<li><div class="empty"></div></li>
<li><div class="empty"></div></li>
</ul>手順としては，表示したい要素と同じ大きさの空の要素を作り，表示したい要素のあとにそれと同じ数だけ追加します。
空要素の幅は表示したい要素と同じ大きさにして，高さは 0px にします。このようにしておかないと，リストの下に余計な空白が作られてしまいます。
空要素の数は表示したい要素と同じ数だけ用意します。次の行に回り込んだ要素は高さを 0px にしておけば表示に影響しません。
追加する空要素の数は，正確には「最大で，要素の横方向の数 － 1」です。横方向の数があらかじめ決まっているならそのようにしても良いでしょうが，レスポンシブの場合は横方向の数はあらかじめ決まっていないことも多いので，表示したい要素の数だけ用意しておけば問題ありません。
Laravelの場合
Laravelなどを使う場合は，空要素は for 文で回した方が良いでしょう。
<ul>
<!-- 表示したい要素 -->
@foreach($items as $item)
<li><div class="card">カード</div></li>
@endforeach
<!-- 空の要素 -->
@for($i = 0; $i <= $items->count(); $i++)
<li><div class="empty"></div></li>
@endfor
</ul>SNSでシェア