css - 是否可以同时使用 flexbox 执行类似 "row-reverse"和 "column-reverse"的操作？

Question

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

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

网格通过在固定大小的“视口(viewport)”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 位置，并根据它修改视口(viewport)的样式:

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`
  };
}

本质上，当我从轴的正侧穿过轴的负侧(反之亦然)时，我翻转容器扩展的方向，以便视口(viewport)始终与容器的至少一个 Angular 齐平，并且容器从那里向外扩展:

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

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

Answer 1

这是可能的。

剧透警告:如果你没有解决这个 GREAT 的所有练习

➡️ Flexbox Froggy - A game for learning CSS

然而，然后以一种非常有趣和有启发性的方式去学习 Flexbox，然后回来(或者不要因为你会在途中找到解决方案 :-) - 顺便说一句，我就是这么记得它是可能的)。< br/> 这很有趣，理所当然!

---

所以这是一个 Codepen其中 flex 元素在两个方向上反向显示，并在带有剧透的片段下方显示。

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