Перенос элементов flexbox по несколько штук сразу без дополнительных обёрток. Как?

Question

[Barring]

Имеется флексовый див в котором располагается 4 элемента. Можно ли каким-то образом сделать перенос сразу 2х элементов без дополнительных обёрток для этих элементов? Ибо если эти обёртки делать, то нужно будет и переделывать практически всё остальное.

Comments

[Андрей]

в песочницу скиньте код

[Алексей Клёнин]

Нашли решение? Тоже надо реализовать подобное.

Answer 1

[Сергей Коноваленко]

Задайте флекс контейнеру такую ширину, чтобы влезли только первые два элемента, тогда остальные перенесутся на новую строку. Не забудьте флекс контейнеру задать flex-wrap: wrap

Answer 2

[Kotaro Hiba]

не знаю на сколько актуально, но вот решение задачки

<style lang="scss">
  .row {
    display: flex;
  }
  .row__block {
    /*Смотрим на каком моменте нам нужно это сделать */
   @media  (max-width: 1200px){
     flex: 0 1 50%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
  }
</style>
<div class="row">
  <div class="row__block"></div>
  <div class="row__block"></div>
  <div class="row__block"></div>
  <div class="row__block"></div>
</div>

Ну или что то типо того, по крайней мере я таким хаком пользуюсь