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