javascript - CSS Flexbox div 自动更改顺序以填充空白

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 个组。

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