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

Question

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

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

网格通过在固定大小的 "viewport" div:

中嵌套可调整大小的 "container" 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，然后回来（或者不要因为你会在途中找到解决方案 :-) - 这就是我记得它是可能的顺便说一句） .
这很有趣，理所当然！

这里有一个 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>

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

Is it possible to do something like "row-reverse" and "column-reverse" simultaneously with flexbox?

css

flexbox

css-grid