How to add a “line break” to flexbox, without causing a double-sized gap?

Question

I have a flexbox that uses gap for spacing, which needs to support “line breaks” that cause subsequent flex items to jump down to the next row.

All examples I’ve seen suggest doing this with a new flex item that has flex-basis: 100% (see example below), however that will cause a double-sized gap between the rows, unlike other rows caused by normal item wrapping.

Example:

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

I’ve tried adding negative top/bottom margins to the line break item, however that doesn’t have any effect for some reason.

Is there a way to add a line break with the same size gap as other lines?

(Swapping gap for margins on the individual items is not an option in this case.)

Answer 1

Appears this just can’t be done currently using gap, so you have to establish the gap using bottom margins on the flex items instead.

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