如何使特定 Flexbox 行展开以填充剩余的垂直空间？

使用 Flexbox 平衡垂直空间

Flexbox 提供了一种强大的机制来组织布局中的内容。然而，有时控制多行弹性盒中特定行的垂直空间消耗可能具有挑战性。

例如，如果您希望第三行扩展以占据剩余的空间垂直空间，以下是使用 Flexbox 实现此目的的方法：

首先，确保外部容器（通常是 body 和 html 元素）以及父 Flexbox 容器（包装器）具有它们的高度设置为 100%，有效地继承了浏览器窗口的完整高度。

接下来，关注 Flexbox 布局中的第三行 (#row3)。为该行指定大于 1 的 Flex 值，同时保留其他行的 Flex 值为 1 或更小的值。这将向浏览器发出信号，表明第三行应比其他行占用更多空间。

要进一步细化布局，您可以设置内部列（#col1、#col2 和#col3) 在第三行内达到 100%。这确保它们继承父容器 (#row3) 的完整高度并相应地调整其高度。

示例代码：

.wrapper, html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

#row1 {
    background-color: red;
}

#row2 {
    background-color: blue;
}

#row3 {
    background-color: green;
    flex: 2;
    display: flex;
}

#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;
}

#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;
}

#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;
}

通过实施这些调整，您可以启用第三行动态调整其高度，从而消耗浏览器窗口中剩余的可用垂直空间。这提供了所需的布局，其中第三行扩展以填充空白并根据需要垂直容纳元素。

以上是如何使特定 Flexbox 行展开以填充剩余的垂直空间？的详细内容。更多信息请关注PHP中文网其他相关文章！