Как отобразить несколько моделей базы данных django в строке flex box?
Итак, чтобы дать некоторую информацию, я знаю, как работает flexbox, и вроде как знаю, как работает django, и уже отображал модели базы данных django на странице, используя цикл. Проблема, с которой я столкнулся, заключается в том, что я хочу иметь несколько (три) этих моделей в одном ряду, как если бы я использовал flexbox с тремя div'ами внутри, но из-за того, как работает цикл, все три div'а одинаковые. Есть идеи, как изменить код, чтобы все div были разными моделями?
Вот мой код :
Вот мой 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);
}
Вот мой models.py на случай, если он вам понадобится :
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')
Наконец, вот мой views.py на случай, если он вам понадобится :
def item_store(request):
items = item.objects.all()
return render(request, 'item-store.html', {'items': items})
А вот картинка моего сайта, чтобы посмотреть, что отображается (Дизайн временный) :
Как насчет этого:
<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>