Css 使用嵌套的角度材质布局时，Flex未按预期工作_Css_Flexbox_Angular Material

Css 使用嵌套的角度材质布局时，Flex未按预期工作

css angular-material

Css 使用嵌套的角度材质布局时，Flex未按预期工作,css,flexbox,angular-material,Css,Flexbox,Angular Material,以下示例布局：有一个按钮的flex属性设置为15（黄色），另一个按钮设置为flex only（绿色）。理论上，黄色按钮的高度必须仅为15%，其余可用空间由绿色按钮使用。如你所见，情况并非如此代码：角度布局问题弯曲弯曲弯曲 Flex=“15” 弯曲弯曲弯曲弯曲弯曲弯曲弯曲有人能解释一下为什么flex属性不能按预期工作吗？经过大量测试，我自己找到了答案：flex=“15”的百分比值计算不正确，因为缺少其父项的高度因此，要解决这个问题，必须对嵌套的flex容器及其所有

以下示例布局：

有一个按钮的flex属性设置为15（黄色），另一个按钮设置为flex only（绿色）。理论上，黄色按钮的高度必须仅为15%，其余可用空间由绿色按钮使用。如你所见，情况并非如此

代码：


角度布局问题
弯曲
弯曲
弯曲
Flex=“15”
弯曲
弯曲
弯曲
弯曲
弯曲
弯曲
弯曲

有人能解释一下为什么flex属性不能按预期工作吗？

经过大量测试，我自己找到了答案：flex=“15”的百分比值计算不正确，因为缺少其父项的高度

因此，要解决这个问题，必须对嵌套的flex容器及其所有父容器应用100%的高度，如下面的示例所示（因此不再需要布局填充属性）


角度布局问题
弯曲
弯曲
弯曲
Flex=“15”
弯曲
弯曲
弯曲
弯曲
弯曲
弯曲
弯曲

希望这对任何人都有帮助

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Angular Layout Issue</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.css">
</head>

<body layout="column" layout-fill>
    <button flex>Flex</button>
    <button flex>Flex</button>
    <button flex>Flex</button>
    <div flex="50" layout="row" layout-fill>
        <div flex layout="column" layout-fill>
            <button flex="15">Flex="15"</button>
            <button flex>Flex</button>
        </div>
        <div flex layout="column" layout-fill>
            <button flex>Flex</button>
            <button flex>Flex</button>
            <button flex>Flex</button>
        </div>
    </div>
    <button flex>Flex</button>
    <button flex>Flex</button>
    <button flex>Flex</button>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.js"></script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Angular Layout Issue</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.css">
</head>

<body layout="column" layout-fill>
    <button flex>Flex</button>
    <button flex>Flex</button>
    <button flex>Flex</button>
    <div style="height: 100%;" flex="50" layout="row">
        <div style="height: 100%;" flex layout="column">
            <button flex="15">Flex="15"</button>
            <button flex>Flex</button>
        </div>
        <div style="height: 100%;" flex layout="column">
            <button flex>Flex</button>
            <button flex>Flex</button>
            <button flex>Flex</button>
        </div>
    </div>
    <button flex>Flex</button>
    <button flex>Flex</button>
    <button flex>Flex</button>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.js"></script>
</body>
</html>