如何通过flex布局每行展示3个不同Django模型数据实例

现有代码的循环逻辑完全写反了：

• 外层{% for item in items %}每轮循环仅取出1条独立的商品数据
• 循环内部硬编码了3个结构完全相同的商品卡片，3个卡片都引用当前轮次的同一条item数据
• 每轮循环都会生成一个新的flex行容器，最终不仅单条数据重复渲染3次，行容器数量也和商品总数完全一致，根本达不到每行3个不同商品的效果。

模型层、视图层代码不需要任何改动，二选一调整模板和样式即可： #

方案1：CSS自动换行实现（推荐，代码最简洁） #

不需要手动拆分每行，直接利用flex的自动换行能力实现自适应排列，后续改每行显示数量只需要改CSS宽度值就行。

模板文件 item-store.html 替换为以下代码 #

<div class="triple-item-container">
  {% for item in items %}
  <div class="single-item-container">
    <div><p>{{item.name}}</p></div>
    <div><p>{{item.details}}</p></div>
    <!-- 后续需要展示价格、图片直接在此处添加对应字段即可 -->
  </div>
  {% endfor %}
</div>

样式文件 item-store.css 调整为以下代码 #

.triple-item-container{
  margin-top: 300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  row-gap: 30px; /* 控制行与行的间距 */
}

.single-item-container{
  width: 30%; /* 每个卡片占容器约1/3宽度，预留间隙位置 */
  padding: 10px;
  box-sizing: border-box; /* 保证内边距不会撑大卡片宽度导致换行错乱 */
  background-color: rgb(226, 215, 113);
}

方案2：模板标签分组实现（严格按3个商品拆分独立行容器） #

如果业务要求必须每3个商品包裹在一个独立的.triple-item-container行容器内，可以通过Django模板内置的循环计数判断，自动拆分新行。

模板文件 item-store.html 替换为以下代码 #

<div class="triple-item-container">
{% for item in items %}
  <div class="single-item-container">
    <div><p>{{item.name}}</p></div>
    <div><p>{{item.details}}</p></div>
  </div>
  {% if forloop.counter|divisibleby:3 and not forloop.last %}
  </div>
  <div class="triple-item-container">
  {% endif %}
{% endfor %}
</div>

该方案原有CSS代码基本可用，仅需给.single-item-container增加width: 30%; box-sizing: border-box;属性，同时移除.triple-item-container的固定height: 200px避免内容溢出即可。

当前模型类使用小写item作为类名不符合Python开发规范，建议调整为大驼峰命名Item，避免后续维护时和实例变量混淆。

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