どうも、7noteです。flexboxは便利ですが、たまに思い通りにならないパターンの解決方法を書いていきたいと思います。

今回はflexboxを使った4列（3列でも可）での方法になります。
5列以上の場合はまた後日、記事書く予定です。

こんな時、flexboxが便利ですが、、、

↓こんな配置をしたい時、、、
ーーーーーーーー
■　■　■　■
■　■　■　■
■　■
ーーーーーーーー

style.css

ul {
    display: flex;
    justify-content: space-between;/* 横方向に等間隔に並べる */
    flex-wrap: wrap; /* 子要素が横にはみ出たら改行させる */
}
ul li {
    width: 1em;
}

しかし、実際これをしてしまうと、こうなります。↓
ーーーーーーーー
■　■　■　■
■　■　■　■
■ 　　　 ■
ーーーーーーーー
一番下の行がjustify-content: space-between;の影響で、左右に配置されてしまいます。

改善する方法

疑似要素（::before,::after）を使うことで解決できます！

style.css

ul {
    display: flex;
    justify-content: space-between;/* 横方向に等間隔に並べる */
    flex-wrap: wrap; /* 子要素が横にはみ出たら改行させる */
}

/* 追記 */
ul::before {
    content: ""; /* 疑似要素には必ず必要 */
    display: block; /* 横幅を指定するためにブロック要素にする */
    width: 1em; /* liの要素と同じ横幅にする */
    order:1; /*beforeはデフォルトでは順番が先頭にくるので、順番を後ろにもってくるためのもの */
}
ul::after {
    content: ""; /* 疑似要素には必ず必要 */
    display: block; /* 横幅を指定するためにブロック要素にする */
    width: 1em; /* liの要素と同じ横幅にする */
}
/* 追記ここまで */


ul li {
    width: 1em;
}

結果は・・・
ーーーーーーーー
■　■　■　■
■　■　■　■
■　■　□　□ 　　←□はbeforeとafterです。高さがないので目には見えない要素。
ーーーーーーーー

目には見えないbeforeとafterが順番の最後にくることで、最後の2個と、before,afterの計4つが均等に並ぶことで、綺麗に最後の行を左寄せに並べることができます。
4列（3列）の場合は、要素が何個だった場合でも綺麗に左寄せにならべることができます。