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; gap: 20px; /* 子要素間の間隔 */ } .container .item { flex: 1; /* 各子要素を均等に分配 */ max-width: calc((100% - 2 * 20px) / 3); /* gapの分を考慮して3等分 */ box-sizing: border-box; /* パディングやボーダーを含めて幅を計算 */ } |
