Можно ли сделать что-то вроде «обратный ряд» и «обратный столбец» одновременно с flexbox?

Question

В приложении, которое я пишу, я пытаюсь создать систему двумерных сеток, которую можно бесконечно расширять в любом направлении.Для тех из вас, кто знаком с LabVIEW, я пытаюсь эмулировать возможность, которую пользователи должны бесконечно прокручивать на лицевой панели и блок-диаграмму ВП.

Используя 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, в этом случае прокрутка в горизонтальном направлении работает нормально, но не в вертикальном направлении.

Есть ли способ, которым я могу сделать оба вместе?Помимо флексбокса, я также пытался поиграться с сеткой CSS, но успеха у меня не было.

Answer 1

Это возможно.

Оповещение о спойлере : если вы не выполнили все упражнения этого БОЛЬШОГО

➡️ Flexbox Froggy - иградля изучения CSS

, затем изучите Flexbox очень забавным и поучительным способом, а затем вернитесь (или нет, потому что вы нашли решение на своем пути: -) - вот как я вспомнил, это возможно, кстати)фрагмент со спойлером.

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