gap flexの並びの上下左右の隙間問題を改善
下記は
ボックス間の縦横の隙間が20px。
横4列だから3つの隙間があります。3つの隙間×20px=60px。
ボックスは左右に密着。
test
test
test
test
test
test
test
test
<div class="flex">
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
</div>
.flex {
display: flex;
flex-wrap: wrap;
gap: 20px
}
.flex div {
background: #CDCDCD;
width: calc((100% - 60px)/4) /*20pxの隙間が3つある。それを4分割*/
}
投稿者プロフィール
最新の投稿
- css2023年9月27日max-content 要素の量に合わせてセンター合わせ
- css2023年9月27日gap flexの並びの上下左右の隙間問題を改善
- web2023年4月12日AIに聞いてみたよ
- web2023年4月11日AIがコードを生成する時代に