这是我的密码。

<?php

$q = $db->query("SELECT * FROM images WHERE user_id = $id");
while ($result = $q->fetch_assoc()):
?>

<div class="box">
  <div class="panel">
    <div class="image" style="background-image: url(uploads/<?= $result['image'] ?>)">
      <div class="overlay">
         <div class="content">
          <strong>Title</strong>
          <p>Some text</p>
        </div>
      </div>
    </div>
  </div>
</div>

  <?php
endwhile;
?>

有问题的图像显示方式不符合我的预期，每次我插入或添加一个新的图像，它总是转到下一行。
这就是我想要的布局。

但每次我添加新图像时，它都会一直显示在下一行。

我也试着把它放在一个排的类中，但什么也没发生。
这是我的css代码。

.box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.panel {
  height: 230px;
  min-width: 250px;
  margin: 10px;
  flex: 1 1 30%;
}

.image {
  background-size: cover;
  height: 230px;
}

.overlay {
  position: relative;
  background-color: rgba(15, 10, 36, 0.5);
  height: 230px;
}

.content {
  text-align: center;
  position: absolute;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}