如何更改 Flexbox 中仅一个元素的间隙？

Question

我正在使用 css flexbox 创建一些东西，并使用间隙来给出元素之间的间距，但现在我只想更改一个元素的间距，例如

.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-parents 使用它来控制其子 flex-items之间的间隙）。

  • _{（该gap属性也适用于display: grid;，但这是本 QA 中的题外话）}

• 要调整弹性项目的间距，请使用重写的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将为。

  • 要获得更小的有效间隙，请设置负裕度值。

    • 例如gap: 5px，margin-left: -1px则左侧的有效间隙4px将为。

  • 这种方法不适用于带有 的项目margin: auto，但这没关系，因为无论如何gap:对于边距都没有用auto。

  • 不要忘记，您还可以使用calc和--custom-properties来使 CSS 更易于阅读，并混合单位（例如，3.2em具有10px有效间隙调整的边距）。

在您的情况下，项目两侧各有 20px，因此应用 amargin-left将为-15px您提供5px左侧间隙，而 amargin-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>