flexアイテムが3カラムの場合に、afterなど擬似要素を利用して空白のflexアイテムを生成することで、どんな数でも左寄せに表示することができます。
1 2 3 4 5 6 7 |
<ul class="box"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.box{ border:3px solid #21a8cd; padding:10px; display : flex; flex-wrap : wrap; justify-content:space-between; } .box::after{ content:""; display: block; width:30%; } .box li{ border:3px solid #ae21cd; padding:10px; margin-bottom:10px; box-sizing:border-box; width:30%; } |
コメント