创建三列大小相等（可调整大小）

Question

我想创建一个包含三列的模块化界面，所有三列基本上应具有相同的宽度，每列之间有一个分隔线。

如果您按住分隔线并向左或向右拖动，周围的两列的宽度应分别增加/减少，但最后一个元素不会，它应保持不变。

我应该尝试什么方法？ 预先感谢！

以下是我的计划的一些可视化：

当您拖放紫色和蓝色字段之间的分隔线时：

到目前为止，我已经尝试过使用

flex: 1;

，然后总是更改 flex-basis，但这会影响所有三个元素的宽度，而不仅仅是周围的两个元素。

如果我使用

width

来调整大小，调整列宽度的机制可以工作，但默认视图不起作用，因为我不知道如何在所有元素上均匀分布宽度。

Answer 1

从每列的 flex: 1 开始，为容器提供总共 flex 3 的空间。稍后记住这一点。

弹性值

• 紫色——弯曲：1
• 蓝色——弯曲：1
• 绿色——弯曲：1

更进一步，如果每列以相等的宽度开始，则每列以 1 中的 0.3333333333 宽度开始。让我们关注没有 flex 的宽度。

宽度百分比：

• 紫色 —— 0.3333333333
• 蓝色 —— 0.3333333333
• 绿色 —— 0.3333333333

如果您想一次更改两个框的宽度，请尝试分别更改 3 个框的 Flex 值（例如，使用

document.querySelector()

并设置

purpleBox.style.flex = '0.1'

）。这样，即使您调整整个容器的大小，比例也将保持正确。您必须了解的主要事情是，每个框的宽度是分隔线相对于整个容器的百分比位置的函数。因此，如果第一个分隔线距容器左侧 25%，则紫色框的宽度必须为 25% (0.25)。如果第二个分隔线距左侧 80%，则绿色框的宽度必须为 20% (0.2)（即 1 - 0.8）。最后，蓝色框必须是宽度的 55%（或 0.55）（即 0.8 - 0.25）。

新宽度百分比

• 紫色——0.25
• 蓝色——0.55
• 绿色 —— 0.20

最后，如果我们将 Flex 值重新绑定到其中，我们就知道 total 容器具有 Flex 3，因此最终的 Flex 值（按紫色、蓝色、绿色的顺序）将是它们的百分比宽度乘以 3。

新的弹性值

• 紫色 —— 3(0.25) = 弹性：0.75
• 蓝色 —— 3(0.55) = 弹性：1.95
• 绿色 —— 3(0.20) = 弹性：0.60

（注意 0.75 + 1.95 + 0.60 是如何加起来达到容器的总 3 柔性的？）

希望这可以帮助您入门。本质上，每当您拖动分隔线时，您都需要运行该计算（紫色 = 左分隔线百分比，蓝色 = 右分隔线百分比减去左分隔线百分比，绿色 = 1 减去右分隔线百分比），然后相应地设置每个框的弹性值。