如何在不破坏 Nth-Child 逻辑的情况下将 Div 插入 Flexbox 砖墙？

Question

我想随机（使用 jquery）注入全宽 bigbrick 类的 div。现在发生的情况是，在插入 .bigbrick div 后，所有第 n 个子逻辑都会中断。如何添加bigbrick 而不会破坏上面的所有内容？

关于如何强制 flexbox 为 div 中断，有一些重复的问题，但没有人谈论后面的元素的后果。

下面的例子是我现在要说明的。 bigbrick 上方的所有内容格式不正确。

body {
  display: flex;
  min-height: 100%;
  background: #ffffff;

}

html {
  min-height: 100%;
}

.flex-container {
  padding: 0;
  width: 1200px;
  min-width:1200px;
  height: auto;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.flex-container li {
  background: brown;
  padding: 5px;
  width: 300px;
  height: 110px;
  border: 5px solid #fff;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
}

.bigbrick {
  background: gold!important;
  padding: 5px;
  width: 1200px!important;
  height: 240px;
  border: 5px solid #fff;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
  display: block!important;

}

.flex-container li:nth-child(9n),
.flex-container li:nth-child(9n+5) {
  width: 150px;
}

.flex-container {
  counter-reset: my-counter;
}

.flex-container li:before {
  counter-increment: my-counter;
  content: counter(my-counter);
} 

<ul class="flex-container wrap-reverse">

  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li> </li>
  <li></li>
  <div class="bigbrick">Big Brick</div>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
  

Answer 1

将li 改为使用span，然后考虑nth-of-type，这样在添加div（这是另一种类型的元素）时不会影响逻辑。

把li改成span是为了让你的代码有效。

body {
  display: flex;
  min-height: 100%;
  background: #ffffff;
}

html {
  min-height: 100%;
}

.flex-container {
  padding: 0;
  width: 1200px;
  min-width: 1200px;
  height: auto;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.flex-container span {
  background: brown;
  padding: 5px;
  width: 300px;
  height: 110px;
  border: 5px solid #fff;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
}

.bigbrick {
  background: gold!important;
  padding: 5px;
  width: 1200px!important;
  height: 240px;
  border: 5px solid #fff;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
  display: block!important;
}

.flex-container span:nth-of-type(9n),
.flex-container span:nth-of-type(9n+5) {
  width: 150px;
}

.flex-container {
  counter-reset: my-counter;
}

.flex-container span:before {
  counter-increment: my-counter;
  content: counter(my-counter);
}

<div class="flex-container wrap-reverse">

  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span> </span>
  <span></span>
  <div class="bigbrick">Big Brick</div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>