Flexbox 交替行样式答案

【问题标题】：Flexbox alternate row styleFlexbox 交替行样式
【发布时间】：2020-08-27 11:52:12
【问题描述】：

我有一个 4 列的 flexbox。纯css是否可以在开始行重新启动第n个孩子？我想得到这个背景

▓░▓░

░▓░▓

▓░▓░

当响应式调整大小时，它应该保持旋转

▓░▓

░▓░

▓░▓

░▓░

我尝试了 nth-child，但在 4 列时，下一行再次以 dark 开头。

$( document ).ready(function(){for (i = 1; i < 12; i++){$( "#parent .child:first-child" ).clone().appendTo( "#parent" );
}});

#wrapper {
  width: 70%;
  margin: 0 auto;
}

#parent {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: flex-start;
}

#parent > .child {
  margin: 10px;
  flex-basis: calc( 100% / 4 );     
  max-width: calc( 100% / 4 - 20px ); 
  width: calc( 100% / 4 - 20px ); 
  background: rgba(0,0,255,0.2);
  padding: 10px;
  box-sizing: border-box;
}

#parent > .child:nth-child(2n) {
  background: rgba(0,255,255,0.2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="parent">
    <div class="child">
      <h4>Lorem Ipsum</h4>
      <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span>
    </div>
</div>

【问题讨论】：

不确定你是否遇到过这个问题，但有人已经尝试使用 css grid 和 nth-child dev.to/thedamon/… 解决这个问题
是的，对于这样的事情，网格是更智能的选择。特别是因为它不需要JS来解决问题。
似乎grid也需要js
@Tactic 他们在实际解决方案中使用的唯一 JS 是生成模板，这样他们就不必编写所有 HTML，就像您在上面所做的克隆一样。

标签： css flexbox

【解决方案1】：

简化我前面提到的 Damon 的例子 -> https://dev.to/thedamon/maintaining-a-pattern-across-a-responsive-grid-4j2b

不需要 JS，关键是 grid-auto-flow:dense 属性可以重排项目，然后您只需使用 nth-child 选择每第二行的第一项，然后使用 grid-column 将其移动到行的末尾，但是对于具有奇数列的网格，您不需要这样做，即使是偶数。如果这有意义的话。

$( document ).ready(function(){for (i = 1; i < 12; i++){$( "#parent .child:first-child" ).clone().appendTo( "#parent" );
}});

#wrapper {
  width: 70%;
  margin: 0 auto;
}

#parent {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, auto);
  grid-auto-flow: dense;
  /*display: flex;
  flex-flow: row wrap
  align-items: stretch;
  justify-content: flex-start;*/
}

#parent > .child {
  /*margin: 10px;
  flex-basis: calc( 100% / 4 );     
  max-width: calc( 100% / 4 - 20px ); 
  width: calc( 100% / 4 - 20px ); */
  background: rgba(0,0,255,0.2);
  padding: 10px;
  box-sizing: border-box;
}

#parent > .child:nth-child(2n) {
  background: rgba(0,255,255,0.2);
}

/*full-width breakpoint */
@media screen and (min-width:1001px) {
    .child:nth-child(8n + 5) {
        grid-column: 4;
    }
}


/*smaller screen breakpoint */
@media screen and (max-width:1000px) {
    #parent {
        grid-template-columns: repeat(3, auto);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="parent">
    <div class="child">
      <h4>Lorem Ipsum</h4>
      <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</span>
    </div>
</div>

【讨论】：