如何实现新增Post项自动换行？求CSS/Bootstrap实现方案

我当前使用Flex布局展示Post列表，新增Post项时，该项会被放置在当前行末尾，但我希望它能自动换行至下一行。现有相关代码如下：

HTML代码： #

<div class="layoutpost" >
    {% for post in  posts %}
    <div class="post">
        <div class="img-post">
          <img src="{{post.urls}}" alt="">
        </div>
        <div class="postdescribe">
            <div>{{post.title}}</div>
            <div class="price">price: {{post.price}}</div>
            <div class="more">
            <a href="{% url 'post' post.id %}"> more... </a>
            </div>
        </div>
    </div>
{% endfor %}
</div>

CSS代码： #

.layoutpost{
display: flex;
justify-content: space-around;

}
.post{
width: 20%;
border: 0.5px solid;
}
.postdescribe{
margin-left: 10px;
margin-bottom: 10px;
}
.img-post{
width: 100%;
height: 300px;
}
.img-post img {
height: 90%;
width: 100%;
}

请问我应该使用哪种样式、Bootstrap类或代码来实现该需求？

要实现Flex容器内的子项自动换行，只需给.layoutpost添加flex-wrap: wrap属性即可，这是Flex布局控制换行的核心属性。

原生CSS修改方案 #

修改后的.layoutpost样式如下：

.layoutpost{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; /* 开启自动换行 */
  gap: 15px; /* 可选：统一控制子项间的间距，比justify-content更灵活 */
  padding: 10px 0; /* 可选：避免子项贴容器边缘 */
}

补充优化建议 #

• 原代码中的justify-content: space-around会让每行子项均匀分布，但最后一行子项数量不足时，左右间距会过大。如果想要更规整的排版，可以换成justify-content: flex-start，配合gap控制间距，子项会靠左对齐且间距一致。
• 注意原HTML代码中需确保{% endfor %}标签存在，才能正确完成循环渲染。

Bootstrap实现方案 #

如果使用Bootstrap，直接给容器添加对应的类即可，无需自定义CSS：

<div class="layoutpost d-flex flex-wrap justify-content-around gap-3">
    {% for post in  posts %}
    <div class="post" style="width: 20%;">
        <!-- Post项内容 -->
    </div>
    {% endfor %}
</div>

这里的d-flex开启Flex布局，flex-wrap实现自动换行，justify-content-around控制子项分布，gap-3设置间距（Bootstrap内置间距类）。

内容的提问来源于stack exchange，提问作者atefe