Flexbox item wrap to a new line

There is a flexbox grid.

.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
</div>

How to transfer .new-string to a new line, along with the elements that follow it?

Flexbox item wrap to a new line

4 Answers