flex-wrap 子を折り返すか決める

<div class="row">
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
</div>

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 12rem;
}
.row > span {
  background: #efeef8;
  padding: 0.4rem 0.7rem;
}