如何使 Flexbox 子容器佔據其父容器的整個高度？

如何讓Flexbox 子元素與其父元素高度相同

使用Flexbox 時，您可能會遇到讓子元素填充其父容器的整個垂直空間的挑戰。如果您希望子元素的高度為父元素的 100%，這可能會特別令人沮喪。

Flexbox 父容器設定

這是您的簡化版本HTML 和CSS代碼：

HTML：

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

CSS：

.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;
}

解決方案：align-items：stretch

要解決此問題，無需訴諸絕對定位或將flex-2元素的高度設定為100%，可以在父容器flex-2上使用align-items:stretch屬性。

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

高度屬性注意事項

很關鍵從 flex-2-child 元素中刪除 height: 100% 屬性。這將確保子元素在父容器內垂直拉伸。

替代：align-self

另一個選項是使用align-self:stretch on您想要填滿高度的特定子元素。

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

此方法可讓您更能控制單一子元素元素。

以上是如何使 Flexbox 子容器佔據其父容器的整個高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！