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