我有一個用于間距的 flexbox gap，它需要支持“換行符”，這會導致后續的 flex 專案跳到下一行。
我見過的所有示例都建議使用具有flex-basis: 100%（參見下面的示例）的新彈性專案來執行此操作，但是這將導致行之間出現兩倍大小的間隙，這與正常專案包裝引起的其他行不同。
例子：
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="break"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.flex {
display: flex;
flex-flow: row wrap;
gap: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 5px;
}
.break {
flex-basis: 100%;
}
我嘗試向換行項添加負的頂部/底部邊距，但是由于某種原因這沒有任何影響。
有沒有辦法添加與其他行具有相同大小間隙的換行符？
（在這種情況下，不能選擇交換gap單個專案的邊距。）
uj5u.com熱心網友回復：
該gap屬性是row-gap和的簡寫column-gap。這意味著您可以為間隙提供兩個值，從而使行和列距離相等：
gap: 5px 10px;
顯示代碼片段
.flex {
display: flex;
flex-flow: row wrap;
gap: 5px 10px;
}
.item {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 5px;
}
.break {
flex-basis: 100%;
}<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="break"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>uj5u.com熱心網友回復：
使用垂直和水平的間隙gap: 10px;組10px。您可以使用gap: 5px 10px;垂直5px間隙和10px水平間隙。
.flex {
display: flex;
flex-flow: row wrap;
gap: 5px 10px;
}
.item {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 5px;
}
.break {
flex-basis: 100%;
}<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<span class="break"></span>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>uj5u.com熱心網友回復：
看來這只是當前使用無法完成的gap，因此您必須使用彈性專案的底部邊距來建立間隙。
.flex {
display: flex;
flex-flow: row wrap;
column-gap: 10px;
margin-bottom: -10px;
}
.item {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 5px;
margin-bottom: 10px;
}
.break {
flex-basis: 100%;
}
uj5u.com熱心網友回復：
我能找到的最佳方法是gap僅用于流動方向上的間隙（在這種情況下為水平），并使用垂直邊距來控制垂直間距。
這感覺比使用更笨拙gap，但是通過在 flex 容器上添加負邊距（以補償專案的邊距）可以在沒有副作用的情況下實作所需的效果（例如，頂部和底部的不希望的間距）：
.flex {
display: flex;
flex-flow: row wrap;
gap: 0 10px; /* Only use gap for horizontal spacing */
margin: -5px 0; /* Compensate for item margin */
}
.item {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 5px;
margin: 5px 0; /* Add (0.5 * gap) vertical margin to flex items */
}
作為旁注，我很驚訝.break元素上的負邊距不起作用：我希望您可以通過添加margin-top: -10px它來解決這個問題，但這似乎不起作用。
編輯：抱歉，我錯過了最后一行“在這種情況下，不能選擇交換單個專案的邊距間隙”，我將保留它，以防萬一向容器添加負邊距以補償的額外步驟不過，專案邊距使這種方法可行。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481794.html
上一篇：Chrome使用102.0.5005.61版本破壞了我的CSS/HTML
下一篇：我正在嘗試在.leaf類上應用margin-top但margin也適用于它的父級我只想將margin-top應用到.leaf類？