如何让 Flexbox 行填充剩余的垂直空间？

在 Flexbox 布局中实现 100% 垂直空间利用率

Flexbox 是一个强大的布局系统，允许开发人员创建响应式动态布局。一种常见的情况是有一个弹性盒布局行，它自动消耗浏览器窗口内剩余的垂直空间。本文探讨了如何使用 Flexbox 属性来实现此目的。

挑战：

考虑一个三行 Flexbox 布局，其中前两行具有固定高度。挑战在于让第三行垂直增长以填充浏览器窗口的剩余空间，从而使其内容相应扩展。

解决方案：

关键要实现此行为，请将第三行的“flex”属性设置为大于 1 的值。这指示 Flexbox 将行增长到超出其固有大小，并将剩余空间分配给其子项。但是，将高度属性设置为 100% 将不起作用，因为行内的内容不会自然地填充浏览器窗口。

实现解决方案：

要正确实现此布局，请确保应用以下原则：

• 设置 html、body 和 html 的高度父 div（包装器）为 100%。这种继承允许第三行继承浏览器窗口的完整高度。
• 将第三行的 flex 属性设置为大于 1 的值（例如，flex: 2）。这会迫使行垂直增长并利用剩余空间。
• 考虑向第三行内的列添加 100% 的最小高度。虽然在大多数现代浏览器中不是必需的，但它可以提供跨浏览器兼容性。

示例代码：

.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中文网其他相关文章！