HTML Flex 子元素不展开至完整高度

在本文中，我们将介绍 HTML 中 Flex 布局中的子元素不展开至完整高度的问题，并提供解决方案和示例说明。

阅读更多：HTML 教程

问题描述

在使用 Flex 布局时，我们经常会遇到子元素不展开至完整高度的情况。通常情况下，子元素的高度会被内容的高度所撑开，但有时候子元素的高度没有撑开，导致布局出现问题。

解决方案

使用 flex-grow 属性

flex-grow 属性控制子元素在父容器中所占的剩余空间。默认情况下，它的值为 0，即子元素不会增长以填充剩余空间。我们可以通过将 flex-grow 属性设置为 1 来解决子元素不展开至完整高度的问题。

<style>
    .container {
        display: flex;
    }

    .child {
        flex-grow: 1;
    }
</style>

<div class="container">
    <div class="child">子元素1</div>
    <div class="child">子元素2</div>
    <div class="child">子元素3</div>
</div>

在上面的示例中，子元素会平均分配父容器中的剩余空间，从而展开至完整高度。

使用 flex 属性

另一种解决方案是使用 flex 属性。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的缩写。我们可以将其设置为 “1 1 0%” 来实现相同的效果。

<style>
    .container {
        display: flex;
    }

    .child {
        flex: 1 1 0%;
    }
</style>

<div class="container">
    <div class="child">子元素1</div>
    <div class="child">子元素2</div>
    <div class="child">子元素3</div>
</div>

这样子元素也会平均分配父容器中的剩余空间，展开至完整高度。

使用 align-self 属性

有时候，子元素不展开至完整高度是因为父容器的 align-items 属性被设置为 align-items: stretch，而子元素的 align-self 属性被设置为 align-self: flex-start。为了解决这个问题，我们可以将子元素的 align-self 属性设置为 align-self: stretch。

<style>
    .container {
        display: flex;
        align-items: stretch;
    }

    .child {
        align-self: stretch;
    }
</style>

<div class="container">
    <div class="child">子元素1</div>
    <div class="child">子元素2</div>
    <div class="child">子元素3</div>
</div>

通过设置 align-self 属性为 stretch，子元素会根据父容器的高度展开至完整高度。