1

Есть flex-контейнер, в котором содержатся 4 элемента:

.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>

Они расположены в одном ряду, flew-wrap их переносит, если экран сужается, сначала таким образом, что идут 3 в ряд, а 1 переносится на 2 строку, а затем уже так, как надо, т.е. по 2 в ряд.

Проблема в том, что я не знаю, как сделать, чтобы убрать это состояние, где переносится лишь 1 элемент. Т.е. чтобы сначала были по 4 в ряд, а затем по 2 в ряд.

Кто знает, как это сделать? Уже 5 страниц гугла перелистал, везде про flex-wrap написано, но он не дает нужного результата

8
  • 2
    Сгруппировать итемы по 2 в контейнере?
    – Moonvvell
    16 фев 2017 в 13:32
  • @Moonvvell верно, но как это сделать? Оболочку для каждых двух элементов? 16 фев 2017 в 13:36
  • Ну это первое что приходит в голову. По 2 итема в собственный див.
    – Moonvvell
    16 фев 2017 в 13:37
  • Уже сделал, написал ответ :) 16 фев 2017 в 21:05
  • Возможный дубликат вопроса: Flexbox item — перенос на новую строку 29 мая 2018 в 5:38

3 ответа 3

1

.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>

1
  • border: solid 1px black; - это только для наглядности.
    – ArgumentX
    7 июл 2017 в 9:53
0

Разобрался.

Добавил в нужном месте с помощью медиа-запроса марджины по бокам, чтобы у контейнера не было места для 3 элементов в ряд.

0

Можно избежать использования в данном случае медиазапросов. Раз вы знаете, что надо переносить по два элемента, то положите их в отдельные блоки по две штуки.

В данном случае:

.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>

Ваш ответ

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

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