【发布时间】：2021-04-05 17:57:05
【问题描述】：
过去几天我一直在尝试了解 CSS flexbox 和网格的工作原理，并尝试使用这些知识来创建特定的 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的最小宽度不小于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应该呈现滚动条。 - 所有这些都最好使用
resize: horizontal/vertical和grid-template-cols: auto/minmax/min-content/max-content等在CSS 中完成，无需任何JavaScript。
请帮助我弄清楚这是否甚至可以单独使用 CSS。如果没有，请向我指出解决此问题的 JavaScript 解决方案。我已经尝试并测试了很多使用网格和弹性框来实现这种布局的可能性，嵌套最多 3 层，但没有成功。请帮我解决这个问题。我相信我会在这里学到新的东西。 :)
谢谢，阿西姆
【问题讨论】：
-
Re: #4，别担心
<canvas width="" height="">，因为无论如何都必须在 JavaScript 中设置。 -
当您说“拖动 [n]”时，您的意思是在列间距中会有 user 拖动句柄吗？如果是这样，那么这不是 CSS
grid- 事实上，这让它变得非常非常困难，因为现在你必须决定如何在 用户调整列大小时解释他们的意图（例如“他们想要设置固定像素大小或百分比大小？") -
我使用 JavaScript 来设置画布的高度和宽度，如你所说。在检查器中，第三个反映为元素的宽度和高度属性。
-
"没有任何 JavaScript。" 这是不可能的。 CSS 的
resize:只能用于为px中的width和height设置固定值。不能用于设置grid:轨道、列和行。 -
拖动是指设置“溢出：自动；调整大小：水平/垂直”时可见的调整大小手柄。如果我可以定义正确的 minmax 或 min-width 或 max-width，我想我可能能够实现这一点。虽然我可能是错的。请指导我。