Есть список товаров ul
, каждый элемент списка представляет собой блок с определённой шириной. Элементы списка располагаются горизонтально. Как сделать так, чтобы если какому-то элементу не будет хватать места, то он будет переноситься на следующую строку?
<ul class="list">
<li class="product">
<p class="product-name">Первый товар</p>
<hr/>
<img src="" alt="Не удалось загрузить изображение">
</li>
<li class="product">
<p class="product-name">Второй товар</p>
<hr/>
<img src="" alt="Не удалось загрузить изображение">
</li>
<li class="product">
<p class="product-name">Третий товар</p>
<hr/>
<img src="" alt="Не удалось загрузить изображение">
</li>
</ul>
.list {
list-style-type: none;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10%;
}
.product {
display: inline;
cursor: pointer;
background-color: #eee;
width: 25%;
margin-left: 5%;
margin-right: 5%;
border-radius: 2vh;
z-index: 0;
}
Вопрос звучит очень легко, сам понимаю, но что-то затупил тут.