如何在换行flex容器中实现隔行反向的S型动态列表布局？

需要将动态生成的有序组件列表以S型模式展示（无需提笔就能从开头连贯追踪到结尾），原有的通过:nth-child(even)反转行方向的方法仅适用于固定行数的列布局，无法适配动态列表，以下是基于Inductive Automation Ignition Perspective环境的可行方案：

原尝试代码（无效） #

CSS #

.flex-container {
  display: flex;
  flex-flow: wrap;
  place-content: flex-start;
  align-items: flex-start;
  flex: 1 1 320px;
}

.flex-item {
  flex: 0 0 calc(33.33% - 10px);
  margin: 5px;
  text-align: center;
  padding: 20px;
  background-color: #ccc;
  border: 1px solid #999;
}

/* 此方法对动态单容器列表无效 */
.flex-container:nth-child(even) {
  flex-direction: row-reverse;
}

HTML #

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
  <div class="flex-item">9</div>
  <!-- 列表为动态生成 -->
</div>

可行解决方案（CSS Grid实现） #

使用CSS Grid的网格定位特性，无需依赖固定行数，完美适配动态列表：

CSS #

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 定义3列布局，可按需修改列数 */
  gap: 10px; /* 替代margin，更简洁的间距控制 */
  flex: 1 1 320px;
}

.grid-item {
  text-align: center;
  padding: 20px;
  background-color: #ccc;
  border: 1px solid #999;
}

/* 针对3列布局，偶数行元素反转排列 */
/* 第4、5、6个元素（第二行）调整位置 */
.grid-container > .grid-item:nth-child(6n + 4) {
  grid-column: 3;
}
.grid-container > .grid-item:nth-child(6n + 5) {
  grid-column: 2;
}
.grid-container > .grid-item:nth-child(6n + 6) {
  grid-column: 1;
}

/* 如果列表长度超过6的倍数，后续偶数行同理 */

HTML #

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <!-- 动态添加元素会自动适配S型布局 -->
</div>

关键说明 #

• 若要修改列数，比如改为4列，只需调整grid-template-columns: repeat(4, 1fr)，同时将nth-child的公式改为8n + 5、8n + 6、8n + 7、8n + 8（每列数×2为周期）
• 在Ignition Perspective中，只需将组件容器的样式类替换为grid-container，子组件使用grid-item类即可直接应用该布局

内容的提问来源于stack exchange，提问作者sqlcaveman