Html 如何使创建的帖子连续四行并在下一行继续？

标题：CSS样式问题 问题：如何在一行中设置四张图片的样式？然后，另一张图片将自动转到下一行 背景资料：

问题：这是我的product.html。它以HTML显示产品。这变得很奇怪，画面就像一个楼梯往下掉

{% for product in product_images %}
    
            <div class="container" id="big">
                <div class="row">
                    <div class="card"  style="width: 18rem;">
                        <img src="{{url_for('static',filename='products/' + product.product_images)}}"  class="card-img-top" alt="...">
                        
                        <div class="card-body">
                        <h5 class="card-title">{{ product.product_name }}</h5>
                        <p class="card-text">price:${{ product.price }}</p>
            
                    </div>
                </div>
            </div>
    
      {% endfor %}
    <style>
.row {
display: flex;
width: 100% ;
}    
.card {
width: 25%
}
</style>
    

{%用于产品中的产品\u图像%}
{{product.product_name}
价格：${{product.price}

{%endfor%}
.行{
显示器：flex；
宽度：100%；
}    
.卡片{
宽度：25%
}

这是我的create product.html。我使用表单创建并上传程序的产品图像。我可以创建产品图像，但产品图像显示在一行中，我希望产品图像在一行中有4个图像，然后第5个产品将转到下一行

{% extends "base.html" %}
{% block body %}
<div class="content-section">
    <form method="POST" enctype="multipart/form-data">
        {{form.hidden_tag()}}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">{{ legend }}</legend>

            <div class="form-group">
                {{form.product_name.label(class="form-control-label")}}
                {% if form.product_name.errors %}
                    {{form.product_name(class="form-control form-control-lg is-invalid")}}
                    <div class="invalid-feedback">
                        {%for error in form.product_name.errors %}
                        <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{form.product_name(class="form-control form-control-lg")}}
                {% endif %}
            </div>


            <div class="form-group">
                {{form.product_price.label(class="form-control-label")}}
                {% if form.product_price.errors %}
                    {{form.product_price(class="form-control form-control-lg is-invalid")}}
                    <div class="invalid-feedback">
                        {%for error in form.product_price.errors %}
                        <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{form.product_price(class="form-control form-control-lg")}}
                {% endif %}
            </div>

            <div class="upload-file">
                {{form.product_image.label}}
                <input type="file" accept="image/png, image/jpeg" name="violin_product" />
            </div>
        </fieldset> 
        <div class="form-group">
            {{form.submit(class="btn btn-outline-info")}}
        </div>
    </form>
</div>
{% endblock body %}

{%extends“base.html”%}
{%block body%}
{{form.hidden_tag（）}}
{{图例}}
{{form.product_name.label（class=“form control label”）}
{%if form.product_name.errors%}
{{form.product_name（class=“form control form control lg is invalid”）}
{%for form.product_name.errors%}
{{error}}
{%endfor%}
{%else%}
{{form.product_name（class=“form control form control lg”）}
{%endif%}
{{form.product_price.label（class=“form control label”）}
{%if form.product_price.errors%}
{{form.product_price（class=“form control form control lg is invalid”）}
{form.product\ U price.errors%}中的错误为%
{{error}}
{%endfor%}
{%else%}
{{form.product_price（class=“form control form control lg”）}
{%endif%}
{{form.product_image.label}
{{form.submit（class=“btn btn outline info”）}
{%endblock body%}

这是我的base.html代码

<main role="main" class="container">
      <div class="row">
        <div class="col-md-12">
          {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
              {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                  {{ message }}
                </div>
              {% endfor %}
            {% endif %}
          {% endwith %}
          {% block body %}{% endblock %}
        </div>
       
      </div>
    </main>

{%with messages=get\u flashed\u messages（with\u categories=true）%}
{%if消息%}
{%对于类别，消息中的消息%}
{{message}}
{%endfor%}
{%endif%}
{%endwith%}
{%block body%}{%endblock%}

我想你错过了孩子们的财产：

.card{
弹性：25%
}