CSS网格/ Flex调整大小魔术
CSS网格/ Flex调整大小魔术
提问于 2020-12-29 02:15:40
在过去的几天里，我一直在试图理解CSS flexbox和网格是如何工作的，并试图将这些知识用于创建一个特定的UI，但到目前为止还没有任何进展。我几乎要放弃了。
UI看起来如下所示：
+----------+-----------------------+---------------------+-----------------+
| CANVAS-1 | DIV-3 | DIV-5 | DIV-7 |
| | | | |
| | | | |
| | | +-----------------+
| | | | DIV-8 |
+----------+-----------------------+---------------------+ |
| CANVAS-2 | DIV-4 | DIV-6 | |
| | | +----------------[4]
| | | | DIV-9 |
| | | | |
| | | | |
+---------[1]---------------------[2]-------------------[3]----------------+忽略调整大小的能力，我可以设计这个布局没有许多问题。然而，我也必须允许调整大小，这也是我在过去两周里惨败的地方。我的制约因素如下：
- 布局应该填充浏览器窗口(
width: 100vw, height: 100vh)。 - 前三列中的两行高度应该相等。
DIV-8的高度应该等于它的内容，而DIV-7/9应该平均地占用剩余的空间。CANVAS-1和CANVAS-2应该有一个宽度，以便保持画布的高宽比(两个画布元素都定义了width="1242" height="2208"属性。- 第3和第4列的初始宽度应为
300px。
使用嵌套网格，我可以很好地实现这个布局。但是，我也应该允许按照以下规则调整布局：
- 将
[1]拖到左边时，两个画布都应该缩小，同时保持其纵横比不变。不应允许拖过其初始位置。拖动这一行不应影响任何其他网格线。 - 拖动
[2]应该将网格线向左或向右移动，这样DIV-3/4的最小宽度不小于400 or，DIV-5/6的最小宽度不小于200 or。拖动这一行不应影响任何其他网格线。 - 拖动
[3]应该将网格线向左或向右移动，这样DIV-5/6的最小宽度不小于200 to，DIV-7/8/9的最小宽度不小于400 to。拖动这一行不应影响任何其他网格线。 - 拖动
[4]应该将DIV-7/8和DIV-8/9之间的网格线向上或向下移动，这样DIV-8的高度应该保持不变，并且DIV-7和DIV-9之间将交换空间。 - 如果内容不完全可见，
DIV-3/4/5/6/7/8/9应该呈现滚动条。 - 所有这些都应该最好在CSS中使用
resize: horizontal/vertical和grid-template-cols: auto/minmax/min-content/max-content等，而不需要任何JavaScript。
请帮我弄清楚这是否可以单独使用CSS。如果没有，请向我指出这个问题的JavaScript解决方案。我尝试并测试了许多使用网格和柔性盒来实现这种布局的可能性，嵌套深度可达3层，但没有成功。请帮我解决这个问题。我相信我会在这里学到新的东西。:)
谢谢你，阿西姆
回答 1
Stack Overflow用户
发布于 2020-12-29 23:25:08
经过几个小时的尝试(没有成功)与CSS单独，我跟随@戴的方向和冒险进入JavaScript。我偶然发现了内森·卡希尔( Nathan )的美丽图书馆网格分裂。通过为2px宽排水沟引入占位符列和修改CSS使其不使用auto单元(库目前不支持)，我能够稍微修改我的网格。连接它现在允许我干净地调整网格的大小，跨越任何我想要的垂直或水平的边缘。
谢谢内森(如果你看到这篇文章)：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65486474
复制相关文章
相似问题
腾讯云开发者
