如何添加A＆＃x201C;线路断路＆＃x201D;到flexbox，而不会引起双重差距？

Question

我有一个使用gap进行间距的Flexbox，该flexbox需要支持“线路断裂”，这会导致后续的Flex项目跳到下一行。

我看到的所有示例建议使用具有flex-basis的新flex项目：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在单个项目上的边距不是一个选择。）

Answer 1

看起来这是当前使用GAP当前无法完成的，因此您必须使用Flex项目上的底部边距建立差距。

.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%;
}

Answer 2

GAP属性是行 - 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>

Answer 3

我可以找到的最佳方法是仅在流动方向上使用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元素不起作用：我希望您可以通过添加rubgin -top：-10px来解决此问题。，但这似乎不起作用。

编辑：对不起，我错过了最后一行，“ 在这种情况下，在这种情况下，在单个项目上交换差距是一个选择 ”但是，将负距离添加到容器以补偿项目边距的其他步骤使此方法可行。

Answer 4

使用gap：10px; sets 10px gap的垂直和水平差距。您可以使用差距：5px 10px; 垂直差距的5px和10px of Horizo​​ntal。

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