使flex-direction: column的子元素height: 100%生效的办法

Posted chen8840

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使flex-direction: column的子元素height: 100%生效的办法相关的知识，希望对你有一定的参考价值。

在flex-direction: column子元素里直接使用height：100%，height并不会被设置成100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .height-500-px {
        height: 500px;
    }
    .height-100-per {
        height: 100%;
    }
    .bg-gray {
        background: gray;
    }
    .bg-yellow {
        background: yellow;
    }
    .flex-column {
        display: flex;
        flex-direction: column;
    }
    .flex-grow-1 {
        flex-grow: 1;
    }
    </style>
</head>
<body>
    <div class="flex-column height-500-px bg-gray">
        <div class="flex-grow-1">
            <div class="height-100-per bg-yellow"></div>
        </div>
    </div>
</body>
</html>

技术分享图片

解决办法是在flex-grow-1这一层再加一个flex row

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .height-500-px {
        height: 500px;
    }
    .height-100-per {
        height: 100%;
    }
    .bg-gray {
        background: gray;
    }
    .bg-yellow {
        background: yellow;
    }
    .bg-blue {
        background: blue;
    }
    .flex-column {
        display: flex;
        flex-direction: column;
    }
    .flex-grow-1 {
        flex-grow: 1;
    }
    .flex-column-row {
        display: flex;
        flex-direction: row;
    }
    </style>
</head>
<body>
    <div class="flex-column height-500-px bg-gray">
        <div class="flex-grow-1 flex-column-row">
            <!-- 注意不要加height:100% -->
            <div class="bg-yellow flex-grow-1 height-100-per"></div>
        </div>
        <div class="flex-grow-1 flex-column-row">
            <div class="bg-blue flex-grow-1"></div>
        </div>
        <div class="flex-grow-1 flex-column-row">
            <div class="flex-grow-1">
                <!-- 里面一层加height:100%是可以的 -->
                <div class="bg-yellow height-100-per"></div>
            </div>
        </div>
    </div>
</body>
</html>

技术分享图片

从以上情况可以大致推测

flex-column子元素的height:100%会优先于flow布局来计算高度，所以直接在flex-column子元素设height:100%没有效果，因为在计算height:100%的时候，高度为0

以上是关于使flex-direction: column的子元素height: 100%生效的办法的主要内容，如果未能解决你的问题，请参考以下文章

如何将Column的子对齐到底部

如何在 Flutter 中动态附加到 Column 小部件的子级

有限制的子字符串 (pyspark.sql.Column.substr)

Flutter 中 Column 的子节点之间的空间小于 MainAxisSize.min

(SQL) Select SUM of (Column 1) * Min(Column2) where Column 1 and 2 share an ID

flutter中如何让Column或Row的子组件相互之间保持一定的间距？