Flexboxで子要素を均等に3等分する
Flexboxでgap: 20px;を指定し、子要素を均等に3等分するCSSは以下のように記述できます。重要なポイントは、Flexboxの特性を利用して子要素の幅を動的に計算させることです。
HTML
|
1 2 3 4 5 |
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 |
.container { display: flex; flex-wrap: wrap; /* 子要素を折り返す */ gap: 10px; /* 子要素間の隙間 */ justify-content: flex-start; /* 常に左寄せ */ } .item { flex: 0 0 calc((100% - 20px) / 3); /* 固定幅で3等分 */ } |
