opencart 3 и FlexBox

[Linderov]

Здравствуйте!

Возможно кто-то сможет мне подсказать...

Хочу сделать вывод товаров на главной через latest.twig адаптивным  с помощью FlexBox.

Вроде бы все сделал правильно и товары выстраиваются в одну строку в зависимости от размера экрана, но как только обрамляю необходимые блоки тегами {% for product in products %} и {% endfor %}, flexbox перестает работать и блоки товаров выстраиваются один под одним. Если можно, подскажите, пожалуйста, как это исправить

 

	<div class="container">
			<div class="box">
			{% for product in products %}
			<div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
			<h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
			<div class="price">{{ product.price }}</div>
			{% endfor %}
		</div>
	</div>

.container {

	height:auto;
	display:flex;
	flex-wrap:wrap;
	max-width:1000px;
	flex-direction:row;
	justify-content:center;

}
.box {
	flex-basis:300px;
}
.price {
	color: #000000;
}

Вот так  не работает

[Linderov]

Всем спасибо!

Оказалось, что нужно сделать так:

	<div class="container">
	{% for product in products %}
			<div class="box">
			<div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
			<h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
			<div class="price">{{ product.price }}</div>
		</div>
		{% endfor %}
	</div>