如何讓 Flexbox 子元素填滿其父元素高度的 100%？

Flexbox 子元素高度：實現100% 父元素填充

在Flexbox 的世界中，填充子元素的垂直空間是一個常見子元素的垂直空間的挑戰。讓我們考慮一下您提供的程式碼片段：

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

在這種情況下，flex-2-child 元素無法佔據其父容器的完整垂直空間，除非flex-2 的高度為100 %或當flex-2-child 具有絕對位置時。然而，這兩種解決方案都有各自的缺點。

解決方案：Align-Items Stretch

一種有效的解決方法是在父容器上使用align-items 屬性（ flex-2):

.flex-2 {
    display: flex;
    align-items: stretch;
}

注意高度：100%；應從子組件(flex-2-child) 中刪除屬性。

此方法指示 flex-2-child 元素垂直拉伸，填充其父容器內的可用空間。它適用於 Chrome 和 Firefox。

作為align-items 的替代方案，您可以將align-self 專門應用於要拉伸的flex-2-child 元素：

.flex-2-child {
    align-self: stretch;
}

透過利用任一技術，您都可以實現讓Flexbox 子元素填滿其父元素的整個高度的所需行為。

以上是如何讓 Flexbox 子元素填滿其父元素高度的 100%？的詳細內容。更多資訊請關注PHP中文網其他相關文章！