CSS网格/Flex调整大小魔术

在过去的几天里，我一直在试图理解CSS flexbox和grid是如何工作的，并试图利用这些知识创建一个特定的UI，但到目前为止还没有成功。我几乎要放弃了

用户界面如下所示：

+----------+-----------------------+---------------------+-----------------+
| CANVAS-1 | DIV-3                 | DIV-5               | DIV-7           |
|          |                       |                     |                 |
|          |                       |                     |                 |
|          |                       |                     +-----------------+
|          |                       |                     | DIV-8           |
+----------+-----------------------+---------------------+                 |
| CANVAS-2 | DIV-4                 | DIV-6               |                 |
|          |                       |                     +----------------[4]
|          |                       |                     | DIV-9           |
|          |                       |                     |                 |
|          |                       |                     |                 |
+---------[1]---------------------[2]-------------------[3]----------------+

忽略调整大小的功能，我可以设计这个布局没有很多问题。然而，我也不得不允许重新调整，而这正是我在过去两周中惨败的地方。我的限制条件如下：

布局应填满浏览器窗口（

宽度：100vw，高度：100vh

）

前三列中的两行应具有相同的高度

DIV-8

的高度应与其内容相等，并且

DIV-7/9

应同等占用剩余空间

CANVAS-1

和

CANVAS-2

的宽度应能保持画布的纵横比（两个画布元素都定义了

width=“1242”height=“2208”

属性）

第3列和第4列的初始宽度应为

300px

使用嵌套网格，我可以很好地实现此布局。但是，我还应该允许根据以下规则调整布局的大小：

向左拖动

[1]

应缩小两个画布，同时保持其纵横比不变。不允许向右拖动超出其初始位置。拖动此行不应影响任何其他网格线

拖动

[2]

应将网格线向左或向右移动，以便

DIV-3/4

的最小宽度不小于400px，

DIV-5/6

的最小宽度不小于200px。拖动此线不应影响任何其他网格线

拖动

[3]

应将网格线向左或向右移动，以便

DIV-5/6

的最小宽度不小于200px，而

DIV-7/8/9

的最小宽度不小于400px。拖动此线不应影响任何其他网格线

拖动

[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

和

网格模板cols:auto/minmax/min content/max content

等，而不使用任何JavaScript

请帮我弄清楚单独使用CSS是否可行。如果不可行，请为我指出解决此问题的JavaScript解决方案。我已经尝试并测试了许多使用网格和FlexBox实现此布局的可能性，嵌套深度高达3级，但均未成功。请帮我解决此问题。我相信我会从他那里学到新东西回复：）

---

谢谢，Asim

在单独使用CSS进行了几个小时的尝试（失败）后，我按照@Dai的指示，冒险使用JavaScript。我偶然发现了内森·卡希尔的这座美丽的图书馆。通过为2px宽的水槽引入占位符列，并修改CSS以不使用

auto

units（该库目前不支持），我可以稍微修改我的网格。现在连接它可以让我在任何垂直或水平边上清晰地调整网格的大小

---

感谢Nathan（如果你看到这篇文章）：

Re:#4，不要担心

，因为无论如何都必须在JavaScript中设置。当你说“拖动[n]”时，你的意思是在列水槽中会有用户拖动手柄吗？如果是这样的话，那就不是CSS

grid

——事实上，这让它变得非常非常困难，因为现在你必须决定当用户调整列的大小时如何解释用户的意图（例如，“他们想设置固定的像素大小还是百分比大小？”），我使用JavaScript来设置画布的高度和宽度，正如你所说的。在inspector中，第三个反射为元素上的宽度和高度属性。“没有任何JavaScript。”这是不可能的。CSS的

resize:

只能用于在

px

中设置

宽度

和

高度

的固定值。它不能用于设置

网格：

轨迹、列和行。通过拖动，我指的是设置“溢出：自动；调整大小：水平/垂直”时可见的调整大小手柄。如果我能定义适当的最小-最大或最小-宽度或最大-宽度，我想我可能能够实现这一点。虽然我可能错了。请引导我。