css - 有没有办法让 CSS 网格中的元素流蛇行/排队？

Question

默认行为:

|A|B|C|D| |E|F|G|H| |I|J|K|L|

期望的行为:

|A|B|C|D| |H|G|F|E| |I|J|K|L|

我已经查看了 grid-auto-flow 属性以及 direction 属性，但似乎没有不求助于 javascript 的解决方法。有没有办法用 CSS 实现这一点？

Answer 1

您可以使用flex 属性和nth-child 选择器

<div class="snakeContainer">
  <div>
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
  </div>
  <div>
    <span>E</span>
    <span>F</span>
    <span>G</span>
    <span>H</span>
  </div>
  <div>
    <span>I</span>
    <span>J</span>
    <span>K</span>
    <span>L</span>
  </div>
</div>

<style>
.snakeContainer div:nth-child(even){
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.snakeContainer div:nth-child(odd){
  display: flex;
}
</style>