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

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

HTML

<div class="box">
 <div class="text">ボックス1</div>
 <div class="text">ボックス2</div>
 <div class="text">ボックス3</div>
</div>

CSS

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

.box .text{
width:46%
}

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

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

コメント