Question

以下示例布局：

有一个按钮，其flex属性设置为15（黄色），另一个按钮设置为仅弯曲（绿色）。从理论上讲，黄色的高度仅为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属性没有按预期工作吗？

Answer 1

经过大量测试后，我自己找到了答案：由于父母的身高缺失，flex =“15”的百分比值未得到正确评估。

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

<url>http://IP:PORT/manager/text</url>
<server>tomcat</server><!-- the name of server in your maven settings.xml -->
<update>True</update>

希望这有助于任何人。

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

1 个答案: