如何使特定 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中文網其他相關文章！