為什麼我的 Flex 子項目沒有填滿容器高度？

如何拉伸Flex 子元素以填充容器高度

使用Flexbox 時，經常會遇到子元素無法填充的問題不會拉伸到其容器的整個高度。這通常是由於 height: 100% 屬性的錯誤使用造成的。

在 Flexbox 中，height: 100% 屬性可能會出現問題，因為：

• 父元素需要固定height，這違反了 Flexbox 的原則。
• 當有多個孩子時，對一個孩子使用 height: 100% 會忽略其他孩子。

解決方案是刪除height: 100% 屬性並依賴 Flexbox 的預設行為。預設情況下，行方向（典型佈局）上的彈性項目透過屬性align-items:stretch 垂直對齊。這意味著子元素將自動拉伸以填充容器的可用高度。

下面是一個範例，示範了沒有高度的正確用法：100%：

<code class="html"><div style="display: flex">
  <div style="background-color: yellow; width: 20px"></div>
  <div style="background-color: blue">
    some<br>
    cool<br>
    text
  </div>
</div></code>

在此範例中，無論藍色子項文字的高度如何，黃色子項都會拉伸以填充容器的高度。這是因為預設的align-items:stretch值確保Flex專案垂直拉伸以佔據可用空間。

以上是為什麼我的 Flex 子項目沒有填滿容器高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！