align-content 折り返した行どうしを寄せる

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

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 7rem;
  gap: 0.35rem;
  background: #f3f1ec;
  padding: 0.4rem;
}
.box > span {
  background: #efeef8;
  padding: 0.3rem 0.6rem;
}