使用flask/jinja容纳动态内容，而不使用HTML表

我不是一个网络开发人员，所以请原谅我，如果这个问题是不正确的

我正在尝试构建我的flask应用程序的一部分，它提供一个相册/卡片样式的页面，如

因此，理想情况下，我希望能够在页面上显示任意数量的卡片，包装内容，使每行显示的卡片不超过3或4张

我认为在这种情况下使用

flex-box

可能会有所帮助，这就是我迄今为止所尝试的：

<div class="box" style="display:flex; max-width: 500px;">
  {% for row in x %}
  <div class="card mb-4 box-shadow" style="padding:5px; min-width: 200px; margin: 10px;">
    <div class="card-body">
      <h5>{{row.title}}</h5>
      <p class="card-text" style="font-size: 15px;">{{row.text}}</p>
      <div class="d-flex justify-content-between align-items-center">
        <div class="btn-group">
          <form action="filtersearch" name="filtersearch" method="POST" style="width: 80%;">
            <input id="namesearch" name="nameval" style="width: 80%;" placeholder={ {current_name}}>
          </form>
      </div>
      <small class="text-muted">9 mins</small>
    </div>
  </div>
</div>
  {% endfor %}

{x%中的行的%s}
{{row.title}}
{{row.text}
9分钟
{%endfor%}

但不幸的是，这只是将它们水平显示到无穷大的边距中

我以前使用过Flask在HTML表中显示动态内容，但是有可能这样做吗

---

谢谢你的帮助

您可以使用

flex-flow:row-wrap

来居中元素，使用

justify-content:center

我添加了

margin:10px

环绕，但您可以选择更改它并使

justify-content:space-around

或

justify-content:space-between

。执行此布局的另一种方法是使用

display:grid

，您可以在此处了解更多信息：

或

检查此代码：

部分{
最大宽度：160px；
高度：自动；
边框：1px实心#A2A2；
文本对齐：居中；
利润率：10px；
}
img{
宽度：100%；
}
.母公司——产品{
显示器：flex；
柔性流：行换行；
证明内容：中心；
}

冬衣
$99.99
冬衣
$99.99
冬衣
$99.99
冬衣
$99.99
冬衣
$99.99
冬衣
$99.99

当您使用

display:flex

时，您还必须添加flex-direction和flex-wrap

flex-flow:row-wrap

等。检查并