借助Flask/Jinja实现无HTML表格的动态卡片布局问题

别担心，问题表述得很清楚！你遇到的flex布局横向无限排列的问题，核心原因是flex容器默认不会自动换行——默认的flex-wrap属性值是nowrap，所以所有卡片都会挤在一行里。咱们来用两种方法解决这个问题，其中第二种还能借助你用到的Bootstrap框架，更省心~

方法1：修复纯Flex布局 #

只需要给你的.box容器添加flex-wrap: wrap属性，再调整卡片的宽度，让它们能自动填满每行空间并换行。比如想要每行最多3张卡片，可以用flex: 1 1 calc(33.333% - 20px)来设置卡片的基础宽度（减去margin的20px，避免溢出）。

修改后的代码示例：

<div class="box" style="display:flex; flex-wrap: wrap; max-width: 1200px; gap: 10px; padding: 10px;">
  {% for row in x %}
    <div class="card mb-4 box-shadow" style="flex: 1 1 calc(33.333% - 20px); min-width: 200px;">
      <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 %}
</div>

这里我还加了gap属性替代margin，让间距更均匀，同时调整了max-width让布局更舒展。

方法2：用Bootstrap栅格系统（更推荐） #

既然你用到了Bootstrap Material Design，直接用Bootstrap的栅格系统会更简单，它自带响应式布局，不用自己算宽度。只需要用row做容器，每个卡片放在col-md-4（每行3张）或者col-md-3（每行4张）的列里：

<div class="container py-5">
  <div class="row row-cols-1 row-cols-md-3 g-4">
    {% for row in x %}
      <div class="col">
        <div class="card mb-4 box-shadow h-100">
          <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>
      </div>
    {% endfor %}
  </div>
</div>

• row-cols-1表示在小屏幕（手机）上每行显示1张卡片，row-cols-md-3表示在中等屏幕及以上每行显示3张；如果要每行4张，改成row-cols-md-4即可。
• g-4是Bootstrap的间距类，用来设置卡片之间的间隙，不用自己写margin。
• h-100让卡片高度一致，布局更整齐。

关于表格布局的补充 #

你之前用表格展示动态内容，但表格更适合结构化的数据（比如表格型信息），这种卡片式相册用flex或Bootstrap栅格会更灵活，也能轻松实现响应式效果，在不同设备上自动调整每行显示的卡片数量。

试试上面的方案，调整一下间距、宽度这些细节，就能得到你想要的相册布局啦！

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