Можно ли сделать что-то вроде «row-reverse» и «column-reverse» одновременно с Flexbox? ⇐ CSS

[Anonymous]

В приложении, которое я пишу, я пытаюсь создать 2D -сетку, которая может быть расширена на неопределенный срок в любом направлении. Для тех из вас, кто знаком с LabView, я пытаюсь подражать, чтобы пользователи должны прокручивать бесконечно прокручивать на передней панели и блок -схему Vis. < /P>

Использование Flexbox, Мне удалось заставить его работать хорошо в направлениях вверх, вниз и влево, но прокрутка справа проблематично: < /p>



Сетка работает, гнездясь с изменяемым разделом «Контейнер» внутри> внутри> внутри> внутри> «ViewPort» фиксированного размера «div < /code>: < /p>

Код: Выделить всё

< /code>

Это жесткие аспекты стилей этих элементов: < /p>

.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`
};
}
< /code>

По сути, я переворачиваю направление, в котором контейнер расширяется, когда я пересекаю положительную сторону оси к отрицательной (или наоборот), чтобы просмотр всегда был промытым По крайней мере, с одним углом контейнера, и контейнер расширяется наружу оттуда: < /p>



Проблема, с которой я столкнулся, заключается em> или  столбцы, но не оба вместе. Как показано в приведенном выше коде, я переключаю между столбцом 

и Column-reverse , который позволяет правильно обрабатывать прокрутку по вертикальной оси, но это приводит к проблеме с горизонтальной прокруткой, как показано в GIF. Я могу изменить это на строку и row-reverse , в этом случае прокрутка в горизонтальном направлении работает нормально, но не вертикальное направление.

Есть ли способ, которым я могу сделать оба вместе? А также Flexbox я также пытался поиграть с CSS Grid, но у меня не было большого успеха.


Подробнее здесь: https://stackoverflow.com/questions/504 ... -simultane