html - 我怎样才能改变唯一元素的差距

Question

我正在用 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有什么办法可以做到这一点

Answer 1

• gap属性仅适用于 flex-parents，不适用于 flex-items。

• 要调整 flex 元素的间距，请使用重写的 margin属性(property)代替。

  • 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 .

  • 要有一个更小的有效间隙然后set a negative margin值(value)。

    • 例如与 gap: 5px和 margin-left: -1px那么左边的有效间隙将为4px .

  • 此方法不适用于 margin: auto 的元素, 但没关系，因为 gap:不适用于 auto无论如何利润率。

---

在你的例子中，你的元素的两边都有 20px，所以应用 margin-left的 -15px会给你一个5px左间隙，和一个margin-right的 -15px会给你一个5px正确的差距。

看起来像这样:

---

像这样:

.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>