如何讓 Flexbox 子項佔據父項的全部高度？

Flexbox 子元素佔據父元素的全部高度

在Flexbox 佈局中，預設情況下，子元素不會填充其父元素的整個高度容器。當嘗試建立一致的垂直排列時，這可能會出現問題。

問題：考慮以下範例，其中.flex-2 中的.flex-2-child 旨在填充的高度它的父級：

.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 並沒有完全佔據高度

解決方法1：align-items:stretch:

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

此解決方案修改了 Flex 專案對齊方式，讓 flex-2-child 拉伸和填充可用高度。

解決方法2： align-self:

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

此替代解決方案將對齊方式直接應用於子元素，確保其填充其父級Flex 項目的高度。

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