CSS Flexbox divs auto change order для заполнения пустого пространства

Question

У меня есть сетка с одинаковой фиксированной высотой и фиксированной шириной div, и мне нужно вставить большой div между линиями этой сетки, не нарушая потока, со случайным HTML позиция. Вот мой HTML:

<div class="small"></div> 
<div class="small"></div> 
<div class="small"></div> 
<div class="big"></div> 
<div class="small"></div> 
<div class="small"></div> 
<div class="small"></div> 
<div class="small"></div> 
<div class="small"></div> 
<div class="small"></div> 

И раскладка я хочу, с HTML порядка дивы:

Основной проблемой является ответная поведение, потому что я не знаю сколько элементов будет в строке. Моя первая идея заключалась в том, чтобы использовать JS для размещения большого div, но он был ненадежным и не чистым.

Я могу изменить гибкий порядок divs с JS, но код с полным кодом будет определенно лучше.

Answer 1

После некоторого размышления я придумал это, без сценария.

Он использует медиа-запросы, и вам нужно сделать некоторые вычисления самостоятельно, чтобы установить всю ширину в соответствии с вашими требованиями.

Здесь a fiddle, который имеет 2 группы, каждый с другим big, имеющий тот же CSS, показывающий способ, который может сработать для вас, и ниже фрагмента кода, но только с одной группой.

.parent { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    min-width: 400px; 
 
} 
 
.parent div { 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
    order: 1; 
 
} 
 
.parent div:before { 
 
    content: attr(data-nr); 
 
} 
 
.parent .small { 
 
    width: 80px; 
 
    height: 50px; 
 
} 
 
.parent .big { 
 
    width: 90vw; 
 
    height: 100px; 
 
    min-width: 400px; 
 
    order: 2; 
 
} 
 
.parent .big ~ .small { 
 
    border-color: red; 
 
    order: 3; 
 
} 
 
.parent .big ~ div:nth-of-type(n+0) { 
 
    order: 1; 
 
} 
 

 
@media screen and (max-width: 900px) { 
 
    .parent .big ~ .small:nth-of-type(n+10) { 
 
    order: 3; 
 
    } 
 
} 
 
@media screen and (max-width: 800px) { 
 
    .parent .big ~ .small:nth-of-type(n+9) { 
 
    order: 3; 
 
    } 
 
} 
 
@media screen and (max-width: 700px) { 
 
    .parent .big ~ .small:nth-of-type(n+8) { 
 
    order: 3; 
 
    } 
 
} 
 
@media screen and (max-width: 600px) { 
 
    .parent .big ~ .small:nth-of-type(n+7) { 
 
    order: 3; 
 
    } 
 
} 
 
@media screen and (max-width: 500px) { 
 
    .parent .big ~ .small:nth-of-type(n+6) { 
 
    order: 3; 
 
    } 
 
}

<div class="parent"> 
 
    <div class="small" data-nr="1"></div> 
 
    <div class="small" data-nr="2"></div> 
 
    <div class="small" data-nr="3"></div> 
 
    <div class="big" data-nr="4"></div> 
 
    <div class="small" data-nr="5"></div> 
 
    <div class="small" data-nr="6"></div> 
 
    <div class="small" data-nr="7"></div> 
 
    <div class="small" data-nr="8"></div> 
 
    <div class="small" data-nr="9"></div> 
 
    <div class="small" data-nr="10"></div> 
 
</div>