Html 如何居中对齐3+；每3行动态div？

我正在尝试将动态生成的div（包含其他div和动态内容）居中，并使它们与一行中最多3个水平对齐，目前它们在同一行中，但未居中于父div（即，右侧有剩余空间）。我在其他帖子上使用了很多方法，但都没有用。任何帮助都太好了！：）

HTML：（PHP将生成任意数量的）

---

您最好使用flexbox。您的容器（父容器）将具有

display:flex

和

justify content:space-between

（因此项目可以均匀地填充空间）。然后在每个单独的项目（子项）上设置

弹性基础：33%

（或者更少，因为您希望项目具有一些

边距
/
填充
，以将一个项目与另一个项目分隔开来）

更多信息：

演示：
使用
代替


您还可以将其添加到tag
中，子div是否需要显示为display:flex；还有？直系子女不需要。取决于你做了多少嵌套，然后是的，你可能需要在某一点上重新引入
display:flex
。好吧，很好，它将它们对齐，但是，我怎么能只得到3个div/行呢？看看这个例子：-这是通过对孩子使用
flex-basis
来实现的对不起，我的错，再次检查上面的内容，我已经修改了它。您还需要在父级上添加
flex wrap:wrap
。
<div id="div$j" class="divs">
    <div class="image_ratio">
        <img src="photos/Asset 1-100.jpg" onerror="this.src='Social_Icons/Rectangle 157@2x.png'">
    </div>
    <h3><?php echo $name; ?></h3>
    <form type="text" name="form$j" id="form$j" action="AJAX.php" method="post">
        <div class="aligner">
            <button type="button" class="button_div")">X</button>
            <button type="button" class="button_div">Y</button>
            <button type="button" class="button_div">Z</button>
        </div><br>
        <input type="hidden"/>
        <input type="hidden"/>
    </form>
</div>

<div class="BAJAX">.....</div>

.BAJAX {
    grid-area: pieces;
    border: solid;
}


.image_ratio {
        position: relative;
        width: 25vmin;
        height: 35vmin;

    }

    .image_ratio img {
        margin: 0 auto;
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    .divs {
        width: 25vmin;
        z-index: 98;
        display: inline-block;
        padding: 2.5%;
        float: left;
        margin: 0 auto;
        border: solid;

    }