CSS Flexbox将自动更改顺序划分为填充空白区域

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>

我想要的布局，使用div的HTML顺序：

主要问题是响应行为，因为我不知道连续多少元素。 我的第一个想法是使用JS放置大div，但它不可靠，而且不干净。

我可以用JS改变div的flex命令，但是完整的CSS代码肯定会更好。

Answer 1

经过一番思考后，我想出了这个，没有脚本。

它使用媒体查询，您需要自己计算一下，根据您的要求设置所有宽度。

以下是a fiddle，其中包含2个组，每个组具有不同的big，具有相同的CSS，显示可能适用于您的方式，并且位于仅包含1个组的代码段下方虽然。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;