There is a flex-container, which contains 4 elements:

.catalog__items { display: flex; flex-wrap: wrap; } .catalog__items__item { display: flex; flex-direction: column; } 
 <div class="catalog__items"> <div class="catalog__items__item">1товар</div> <div class="catalog__items__item">2товар</div> <div class="catalog__items__item">3товар</div> <div class="catalog__items__item">4товар</div> </div>

They are located in the same row, flew-wrap transfers them if the screen is narrowed, first so that they go 3 in a row, and 1 is transferred to line 2, and then as it should, i.e. 2 in a row.

The problem is that I do not know how to do this to remove this state, where only 1 element is transferred. Those. so that at first there were 4 in a row, and then 2 in a row.

Who knows how to do this? Already 5 pages of Google flipped through, everywhere about flex-wrap is written, but it does not give the desired result

  • 2
    Group items by 2 in a container? - Moonvvell
  • @Moonvvell is true, but how to do it? A shell for every two elements? - Alexxosipov
  • Well, this is the first thing that comes to mind. 2 items in your own div. - Moonvvell
  • Already done, wrote the answer :) - Alexxosipov
  • Possible duplicate question: Flexbox item - transfer to a new line - Vadim Ovchinnikov

3 answers 3

 .catalog__items { display: flex; flex-wrap: wrap; } .catalog__items__item { display: flex; flex-direction: column; } .catalog__items::after { content: ''; width: 100%; order: 0; border: solid 1px black; } .catalog__items__item:nth-child(n + 3) { order: 1; } 
 <div class="catalog__items"> <div class="catalog__items__item">1товар</div> <div class="catalog__items__item">2товар</div> <div class="catalog__items__item">3товар</div> <div class="catalog__items__item">4товар</div> </div>

  • border: solid 1px black; - this is only for clarity. - ArgumentX

Understood.

Added in the right place with the help of media request margins on the sides, so that the container did not have space for 3 elements in a row.

    You can avoid using media queries in this case. Once you know that you need to transfer two elements, then put them in separate blocks of two pieces.

    In this case:

     .catalog__items { display: flex; flex-wrap: wrap; } /* дополнительный контейнер без flex-wrap: wrap */ .catalog__items__item-wrapper { display: flex; } /* демонстрируем маленькую ширину экрана */ .catalog__items--reduced { width: 100px; } /* исходные стили, которые для данной демонстрации вообще нерелевантны */ .catalog__items__item { display: flex; flex-direction: column; } 
     <h2>Обычный экран</h2> <div class="catalog__items"> <div class="catalog__items__item-wrapper"> <div class="catalog__items__item">1товар</div> <div class="catalog__items__item">2товар</div> </div> <div class="catalog__items__item-wrapper"> <div class="catalog__items__item">3товар</div> <div class="catalog__items__item">4товар</div> </div> </div> <h2>Маленький экран</h2> <div class="catalog__items catalog__items--reduced"> <div class="catalog__items__item-wrapper"> <div class="catalog__items__item">1товар</div> <div class="catalog__items__item">2товар</div> </div> <div class="catalog__items__item-wrapper"> <div class="catalog__items__item">3товар</div> <div class="catalog__items__item">4товар</div> </div> </div>