Flex 无法按预期使用嵌套 angular material 布局

Question

以下示例布局：

有一个按钮的 flex 属性设置为 15 (yellow)，另一个设置为仅 flex (green)。理论上，黄色按钮的高度必须只有 15%，剩余的可用 space 由绿色按钮使用。如您所见，事实并非如此。

代码：

<!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 属性没有按预期工作？

Answer 1

经过大量测试，我自己找到了答案： flex="15" 的百分比值由于缺少其父项的高度而无法正确计算。

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

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

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

Flex 无法按预期使用嵌套 angular material 布局

Flex not working as expected with nested angular material layout

css

flexbox

angular-material