CSS 多列蛇形图案

Question

<分区>

Answer 1

请试试这个。

.container {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  
}
.item { width: calc(100% / 4); }
.item:nth-child(1) { order: 0; }
.item:nth-child(2) { order: 5; }
.item:nth-child(3) { order: 9; }
.item:nth-child(4) { order: 10; }
.item:nth-child(5) { order: 6; }
.item:nth-child(6) { order: 2; }
.item:nth-child(7) { order: 3; }
.item:nth-child(8) { order: 7; }
.item:nth-child(9) { order: 11; }
.item:nth-child(10) { order: 12; }
.item:nth-child(11) { order: 8; }
.item:nth-child(12) { order: 4; }

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