Question

我不是网络开发者，所以如果这个问题偏离基础，请原谅我。

我试图构建我的烧瓶应用程序的一部分，提供像this这样的专辑/卡片样式页面。

所以，理想情况下，我希望能够在页面上显示任意数量的卡片，包装内容，以便每行显示不超过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 %}

但不幸的是，这只是将它们水平显示在边距的无穷远处。

我之前使用过Flask来显示HTML表格的动态内容，但是可以这样做吗？

感谢您的帮助！

Answer 1

您可以使用flex-flow: row wrap并使用justify-content: center将元素置于中心位置我添加了margin:10px但您可以选择更改它并生成justify-content: space-around或{{1} }。另一种做这种布局的方法是使用justify-content: space-between你可以在这里阅读更多相关内容：

A Complete Guide to Grid

或

A Complete Guide to Flexbox

检查此代码：

＆＃13;

display: grid

＆＃13;

section {
  max-width: 160px;
  height: auto;
  border: 1px solid #a2a2a2;
  text-align: center;
  margin: 10px;
}

img {
  width: 100%;
}

.parent--products {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

＆＃13;

使用flask / jinja来容纳没有HTML表格的动态内容

1 个答案: