CSS多列蛇形图案[重复]答案

【问题标题】：CSS multi-column snake pattern [duplicate]CSS多列蛇形图案[重复]
【发布时间】：2019-11-13 03:24:10
【问题描述】：

我有一个项目列表，例如：

<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>

.container {
  column-count: 4;
}

这给了我：

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

有没有办法得到（不改变标记结构）：

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

每个偶数列从下到上模仿蛇形图案。

【问题讨论】：

完全不改变标记，那么您可能可以使用 css 网格，但这将涉及使用第 n 个子选择器来选择每个项目，并手动将每个项目排列在网格上。这是一种乏味的方法，如果这些项目的数量可能发生变化，它就不会那么好。
@Jasmine 如果行数始终为 3，那么我们不需要很多 nth-child() ：stackoverflow.com/a/58598708/8620333

标签： css flexbox multiple-columns

【解决方案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>

【讨论】：

我在考虑一个更动态的解决方案，我可以有 200 个项目。
为此你需要改变结构。