有沒有辦法在所有物品的兩面都放置一個(gè)完整的空間，包括第一個(gè)和最后一個(gè)？我正在嘗試找到一種在flexbox子代之間具有相等間距的方法。在本文中，似乎最接近的是justify-content: space-around。它說：space-around：項(xiàng)目在行中均勻分布，并且周圍有相等的空間。請(qǐng)注意，從視覺上看，空間是不相等的，因?yàn)樗许?xiàng)目的兩側(cè)都具有相等的空間。第一項(xiàng)相對(duì)于容器邊緣有一個(gè)單位的空間，但是下一項(xiàng)之間有兩個(gè)單位的空間，因?yàn)橄乱豁?xiàng)具有自己的適用間距。
3 回答
犯罪嫌疑人X
TA貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊
這是一個(gè)完美的使用情況flex-basis和justify-content: space-between如果你知道有多少成分會(huì)成為你行提前。在彈性項(xiàng)目上指定所有項(xiàng)目的總彈性百分比小于100％。剩余的百分比將成為邊距。
沒有偽元素，子選擇器或填充/邊距。
div {
display: flex;
justify-content: space-between;
height: 100px;
}
span {
flex-basis: 32%;
background: red;
}
<div>
<span></span>
<span></span>
<span></span>
</div>
添加回答
舉報(bào)
0/150
提交
取消