我怎樣才能改變唯一元素的間隙-有解無憂

我正在用css flexbox創建一些東西，并使用gap來給出元素之間的間距，但現在我只想改變一個元素的間距，比如

.container{
  display: flex;
  gap: 20px;
}

.items{
  width: 100px; 
  height: 100px;
  background: red;
  
}

.item-4{
  background: blue;
}

<div class="container">
  <div class="items item-1"></div>
  <div class="items item-2"></div>
  <div class="items item-3"></div>
  <div class="items item-4"></div>
  <div class="items item-5"></div>
  <div class="items item-6"></div>
</div>

現在我想將藍色框的間隙從 20px 更改為 5px 有什么辦法可以做到這一點

uj5u.com熱心網友回復：

該gap屬性僅適用于flex-parents，不適用于 flex-items。

要調整彈性專案的間距，請改用重寫的margin屬性。

因為flex-direction: horizontal您需要設定margin-left和margin-right（或margin-inline-start和margin-inline-end）。
因為flex-direction: vertical您需要設定margin-top和margin-bottom（或margin-block-start和margin-block-end）。
要獲得更大的有效差距，請設定任何正邊距值。
- 例如，gap: 5px然后margin-left: 1px向左的有效間隙將是6px。

要獲得更小的有效差距，請我怎樣才能改變唯一元素的間隙

像這樣：

.container{
  display: flex;
  gap: 20px;
}

.items{
  width: 100px; 
  height: 100px;
  background: red;
  
}

.item-4 {
  background: blue;
  margin-left: -15px; /* Adapt 20px gap to 5px */
  margin-right: -15px; /* Adapt 20px gap to 5px */
}

<div class="container">
  <div class="items item-1"></div>
  <div class="items item-2"></div>
  <div class="items item-3"></div>
  <div class="items item-4"></div>
  <div class="items item-5"></div>
  <div class="items item-6"></div>
</div>

uj5u.com熱心網友回復：

.container{
  display: flex;
  gap: 20px;
}

.items{
  width: 100px; 
  height: 100px;
  background: red;
  
}

.item-4{
  background: blue;
  margin-left: -15px;
}

<div class="container">
  <div class="items item-1"></div>
  <div class="items item-2"></div>
  <div class="items item-3"></div>
  <div class="items item-4"></div>
  <div class="items item-5"></div>
  <div class="items item-6"></div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/441399.html

標籤：html css 弹性盒间隙系统

上一篇：如何更改重采樣列的名稱？

下一篇：使用JavaScript更改按鈕的類別和div的顯示