0

Допустим есть список товаров. Добавление товара на страницу производится с сервера. Для блока с товарами установлен display:flex, но как реализовать ограничение для одной строки. Допустим, я хочу чтобы показывало в одной строке только 3 товара и далее выполнялся перенос на след строку.

.content {
  width: 1200px;
}

.products {
  display: flex;
}

.product {
  text-align: center;
  width: 150px;
  height: 100px;
}
<div class="content">
  <div class="products">
    <!--Сюда добавляется товар с классом product-->
  </div>
</div>

4
  • А в остальных строках сколько товаров? Тоже по три или больше? Ну и разметку хотя-бы напишите.
    – zhurof
    13 дек 2018 в 18:41
  • @ГеннадийЖуров да тоже 3
    – Malyuga
    13 дек 2018 в 18:42
  • Уменьшите ширину контейнера с товарами. Ну и flex-wrap:wrap, для контейнера если не установлен ещё.
    – zhurof
    13 дек 2018 в 18:43
  • @ГеннадийЖуров Уменьшил, теперь все блоки с товарами стали еще ближе друг к другу ну и те что не влезли просто выехали за границы products
    – Malyuga
    13 дек 2018 в 18:51

1 ответ 1

2

Поскольку у Вас ширина .product задана жёстко (width: 150px), то чтобы в каждой строке было только 3 элемента, необходимо жёстко ограничить ширину .products (например, 550px). Ну и сделать перенос (flex-wrap: wrap)

.content {
   width: 1200px;
   border: 1px solid red;
}

.products {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   border: 1px solid green;
   width: 550px;
   margin: 15px auto;
}

.product {
   text-align: center;
   width: 150px;
   height: 100px;
   margin: 10px;
   border: 1px solid blue;
}
<div class="content">   
    <div class="products">
        <div class="product">123</div>
        <div class="product">456</div>
        <div class="product">789</div>
        <div class="product">abc</div>
        <div class="product">def</div>
        <div class="product">ghi</div>
        <div class="product">jkl</div>
        <div class="product">nmo</div>
    </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.