如何在Flex Box行中显示多个Django数据库模型？

Question

因此，为了提供一些信息，我知道Flexbox的工作方式，并且Sorta知道Django的工作原理，并且已经使用循环之前已经在页面上显示了Django数据库模型。我遇到的问题是，我想在一排中有多个（三个）的模型，例如我在内部使用了一个带有三个divs的flex盒，除非循环运行所有三个Divs的方式相同。关于如何将Divs的代码更改为所有模型的任何想法？

这是我的代码：

这是我的item-store.html（html页面以显示项目）：

{% for item in items %}
<div class="triple-item-container">
  <div class="single-item-container">
    <div><p>{{item.name}}</p></div>
    <div><p>{{item.details}}</p></div>
  </div>
  <div class="single-item-container">
    <div><p>{{item.name}}</p></div>
    <div><p>{{item.details}}</p></div>
  </div>
  <div class="single-item-container">
    <div><p>{{item.name}}</p></div>
    <div><p>{{item.details}}</p></div>
  </div>
</div>
{% endfor %}

这是我的item-store.css（CSS页面链接到html页面）：

.triple-item-container{
  margin-top: 300px;

  height: 200px;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.single-item-container{
  padding: 10px;

  background-color: rgb(226, 215, 113);
}

这是我的模型。它：

class item(models.Model):
  name = models.CharField(max_length=100, blank=False, null=False)
  details = models.CharField(max_length=1000, blank=True, null=True)
  price = models.DecimalField(blank=False, null=False, decimal_places=2, max_digits=20)
  tag_choices = (
    ('bakery', 'bakery'),
    ('meat&seafood', 'meat&seafood'),
    ('fruits', 'fruits'),
    ('vegetables', 'vegetables'),
    ('dairy', 'dairy')
  )
  tag = models.CharField(max_length=100, default=None, blank=False, null=False, choices=tag_choices)
  image = models.ImageField(default=None, blank=False, null=False, upload_to='files-pictures')

最后是我的视图

def item_store(request):
  items = item.objects.all()
  return render(request, 'item-store.html', {'items': items})

。

Answer 1

怎么样：

<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>