gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:01:05 25 4
gpt4 key购买 nike

在我正在编写的应用程序中,我试图创建一个可以在任何方向无限扩展的二维网格系统。对于那些熟悉 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 只允许我反转行 列,但不能同时反转。如上面的代码所示,我在 columncolumn-reverse 之间切换,这让我可以正确处理垂直轴上的滚动,但这会导致水平滚动出现问题,因为GIF 中显示。我可以将其更改为 rowrow-reverse,在这种情况下,水平方向滚动正常,但垂直方向滚动不正常。

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

最佳答案

这是可能的。

剧透警告:如果你没有解决这个 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>

关于css - 是否可以同时使用 flexbox 执行类似 "row-reverse"和 "column-reverse"的操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50412461/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com