是否可以与flexbox同时执行“row-reverse”和“column-reverse”之类的操作？

Question

在我写的一个应用程序中，我正在尝试创建一个可以在任何方向无限扩展的2D网格系统。对于那些熟悉LabVIEW的人，我试图模仿用户必须在前面板和VI的框图中无限滚动的能力。

使用flexbox，我设法让它在向上，向下和向左的方向上正常工作，但向右滚动是有问题的：

网格的工作原理是将可调整大小的“容器”div嵌套在固定大小的“视口”div中：

<template>
  <div class="expandable-grid-viewport" ...>
    <div class="expandable-grid-container" ...>
      <div v-for="tile in tiles" ...>
        <GridSquare .../>
      </div>
    </div>
  </div>
</template>

这些是元素风格的硬编码方面：

.expandable-grid-viewport {
  display: flex;
  min-height: 100%;
  min-width: 100%;
  overflow: scroll;
}

.expandable-grid-container {
  position: relative;
  display: flex;
  overflow: hidden;
}

我将网格轨迹设置为与用户滚动位置相对应的x / y位置，并根据它修改视口的样式：

get viewportStyle() {
  const [viewportWidth, viewportHeight] = this.viewportDimensions;

  return {
    "flex-direction": this.yIndex < 0 ? "column" : "column-reverse",
    "align-items": this.xIndex < 0 ? "flex-start" : "flex-end",
    width: `${viewportWidth}px`,
    height: `${viewportHeight}px`
  };
}

基本上，当我从轴的正面穿过负面（或反之亦然）时，我会翻转容器展开的方向，以便视口始终与容器的至少一个角和容器齐平从那里向外扩展：

我面临的问题是flexbox只允许我反转行或列，但不能同时反转。如上面的代码所示，我在column和column-reverse之间切换，这使我能够正确处理垂直轴的滚动，但这会导致水平滚动问题，如GIF所示。我可以将其更改为row和row-reverse，在这种情况下，水平方向滚动可以正常工作，但不能垂直方向。

我有办法一起做两件事吗？除了flexbox之外，我还尝试过使用CSS网格，但我没有取得多大成功。

Answer 1

这是可能的。

剧透警告：如果你没有解决这个伟大的所有练习

➡️ Flexbox Froggy - A game for learning CSS

然后，以一种非常有趣和有教育意义的方式学习Flexbox然后回来（或者不要因为你将在途中找到解决方案:-) - 这就是我记得它的可能性btw）。<登记/> 这很有趣，被授予！

所以这里是Codepen，其中弹性项目在两个方向上反向显示，并且在带有扰流板的片段下面。

.flex {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
  width: 80%;
  margin: 5%;
  background-color: deeppink;
}

.item {
  width: 16%;
  margin: 2rem;
  padding: 1rem 2rem;
  text-align: center;
  color: white;
  background-color: darkviolet;
}

<h1>flex-flow: row-reverse wrap-reverse;</h1>
<div class="flex">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
</div>