使用嵌套的角度材质布局时，Flex 无法按预期工作答案

【问题标题】：Flex not working as expected with nested angular material layout使用嵌套的角度材质布局时，Flex 无法按预期工作
【发布时间】：2016-04-22 14:17:32
【问题描述】：

以下示例布局：

有一个按钮的 flex 属性设置为 15（yellow），另一个设置为仅 flex（green）。理论上，黄色按钮的高度必须只有 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>

谁能解释一下为什么 flex 属性没有按预期工作？

【问题讨论】：

标签： css flexbox angular-material

【解决方案1】：

经过大量测试，我自己找到了答案： flex="15" 的百分比值没有正确评估，因为它的父母缺少高度。

因此，要解决这个问题，您必须将 100% 的高度应用于嵌套的 flex 容器及其所有父级，如下面的示例所示（因此不再需要 layout-fill 属性） .

<!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>

希望这对任何人都有帮助。

【讨论】：