Flexbox内の一部要素のみ動かしたい

例えばjustify-content: space-betweenで端から端まで均等配置している場合でも
内包している要素の数によっては部分的に移動させたいケースもある。

/* 最後の要素を左に寄せたい場合 */
li {
    &:last-child {
        margin-right: auto;
        margin-left: 5%;
    }
}

※margin-leftは任意

追記（マージンを使う方法）

表示させる項目数が事前に決まっている場合は上記でよいが、
同じフォーマットをテンプレートのように使い回したり、表示件数が不明な場合は、レイアウトが崩れるなどの不都合もありうるので、space-betweenは仕様せず、flex-startとし、要素ごとにmargin-rightなどでスペースを確保するほうが確実である。

ul.flex {
    display: flex;
    justify-content: flex-start;
    li {
        width: 30%;
        margin-right: 5%;
        &:nth-child(3n) {
            margin-right: 0;
        }
    }
}

レスポンシブ対応などで記述が増える分には仕方ない。