flexboxで最後の行を左揃えにする

あちこちで書かれていますがよく使うのでメモ

HTML

<div class="box">
　<div class="text">ボックス１</div>
　<div class="text">ボックス２</div>
　<div class="text">ボックス３</div>
</div>

CSS

/*　2カラムのフレックスボックスにしたい場合　*/
.box{
display:flex;
flex-wrap:wrap;
}

.box .text{
width:46%
}

/*　ポイント↓　フレックスボックスと同じ幅の見えないboxを置く　*/
.box::after{
content: "";
display: block;
width: 48%; 
height: 0;
}

これで１つだけ下の行になったボックス３は中央に寄らずに左寄せになります