Flexboxのjustify-contentで最後の行を左寄せにする方法

基本のレイアウト

HTML
1
2
3
4
5
6
<section class="container">
        <section class="sec01">セクション1</section>
        <section class="sec01">セクション2</section>
        <section class="sec01">セクション3</section>
        <section class="sec01">セクション4</section>
</section>

3カラムの場合

SCSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &::after{
        content: "";
        display: block;
        width: calc((100% - 2em) / 3);
    }
    .sec01 {
        width: calc((100% - 2em) / 3);
    }
}

4カラムの場合

SCSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &::before {
        content: "";
        display: block;
        width: calc((100% - 3em) / 4);
        order: 1;
    }
    &::after {
        content:"";
        display: block;
        width: calc((100% - 3em) / 4);
    }
    .sec01 {
        width: calc((100% - 3em) / 4);
    }
}

5カラム以上
対応が難しいので、 sec01を複数入れて対応。