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

Posted 2023-03-06

【中文标题】如何在不破坏 Nth-Child 逻辑的情况下将 Div 插入 Flexbox 砖墙？

【英文标题】：How to Insert a Div in a Flexbox Brick Wall Without Breaking the Nth-Child Logic?

【发布时间】：2018-10-25 03:16:42

【问题描述】：

我想随机（使用 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>
  

【问题讨论】：

值得注意的是，div 不能是列表的直接子级。该代码实际上是无效的。

你不应该在列表项中添加 div.. 它应该在 li > div

我想我的方法是错误的。有没有随机插入全宽子的好方法？

【参考方案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>

【讨论】：

谢谢！我尝试了大砖的跨度，但我不知道我可以将列表更改为跨度。我是一个 90 年代的桌子人，所以所有这些 flexbox 的东西都让我大吃一惊。很酷。 [注意：我投了赞成票并将选择作为答案。自从