CSS灵活布局，用于以链链接方式安排有序的块元素

如何解决CSS灵活布局，用于以链链接方式安排有序的块元素

我对CSS灵活的布局有点晚了，我发现这在CSS中颇具挑战性。我需要一种布局，其中已排序的块项目的排列方式类似于链式链接，以便相邻项目之间的距离全部为1段。布局可以是行或列。项目的数量可以变化，并且没有固定的行数或列数可以考虑灵活的响应式设计。重点是项目的顺序需要与假想的流状视觉线索相匹配。

对于9个项目和3列（行布局），它看起来像这样（sketch image）：

| 1 | 2 | 3 |
|---|---|---|
| 6 | 5 | 4 |
|---|---|---|
| 7 | 8 | 9 |

列布局版本：

| 1 | 6 | 7 |
|---|---|---|
| 2 | 5 | 8 |
|---|---|---|
| 3 | 4 | 9 |

但是我们通常得到的是布局，其中各项以文本流方式进行排列，例如。对于默认的从左到右的文本流，它将看起来像这样（行布局）：

| 1 | 2 | 3 |
|---|---|---|
| 4 | 5 | 6 |
|---|---|---|
| 7 | 8 | 9 |

每个项目的大小也可以变化，但是我认为这不是问题，因为flexBox已经为此做好了。对我来说，挑战是要创建一种简洁的CSS解决方案，以类似流的流向自动生成具有灵活布局的每隔一行或每隔一列的流向（即动态更改行或列的数量）。

快速想到的是，每隔一行或每列交替改变流向，就像改变表行颜色以提供视觉帮助一样，但是我发现flexBox本质上是一维线性容器，带有包装（插入斩波点以创建段以成为行或列） ）。还是flexBox不是一个选择，而我们需要一个网格？我想知道JavaScript解决方案是否可以帮上忙，但是说真的，CSS真的不能做到这一点吗？