是否可以使用 Flexbox 同时执行“行反转”和“列反转”之类的操作？

Question

在我正在编写的应用程序中，我试图创建一个可以在任何方向无限扩展的二维网格系统。对于那些熟悉 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 所示。我可以将其更改为rowand row-reverse，在这种情况下，水平方向滚动效果很好，但垂直方向滚动效果不佳。

有没有办法可以同时做到这两点？除了 Flexbox 之外，我还尝试过使用 CSS 网格，但没有取得太大成功。

Answer 1

这是可能的。

\n\n

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

\n\n

\xe2\x9e\xa1\xef\xb8\x8f Flexbox Froggy - 学习 CSS 的游戏

\n\n

然而，然后以一种非常有趣和有启发性的方式学习 Flexbox，然后回来（或者不回来，因为你会在路上找到解决方案:-) - 这就是我记得的方式顺便说一句，可能）。
\n这很有趣，当然！

\n\n\n\n

所以这里是一个Codepen，其中弹性项目在两个方向上反向显示，并在带有剧透的片段下方显示。

\n\n

\r\n

\r\n

.flex {\r\n  display: flex;\r\n  flex-flow: row-reverse wrap-reverse;\r\n  width: 80%;\r\n  margin: 5%;\r\n  background-color: deeppink;\r\n}\r\n\r\n.item {\r\n  width: 16%;\r\n  margin: 2rem;\r\n  padding: 1rem 2rem;\r\n  text-align: center;\r\n  color: white;\r\n  background-color: darkviolet;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n