我想创建一个包含angular-material布局指令的登录页面,但我遇到了flex
的问题。第8行不应该flex=10
将div
的高度设置为10%?我错过了重要的事情吗?
提前感谢您提供任何帮助!
* > div {
background-color: rgba(50, 150, 255, .5);
}
* > div:nth-of-type(2) {
background-color: rgba(255, 255, 120, 1);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-csp.css" rel="stylesheet" />
<body layout="column">
<div class="login" layout="row" flex>
<div flex></div>
<div layout="column">
<div flex=10></div> <!-- Here: Why is this not working? -->
<div>
Hello
</div>
<div flex></div>
</div>
<div flex></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.js"></script>
</body>
&#13;
PS。:我使用的是镀铬49.0.2623.112米(64位)
答案 0 :(得分:1)
如果为容器定义外部div的高度和 layout-fill 属性,它应该可以正常工作。
* > div {
background-color: rgba(50, 150, 255, .5);
}
* > div:nth-of-type(2) {
background-color: rgba(255, 255, 120, 1);
}
<link href="https:////cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-csp.css" rel="stylesheet" />
<body layout="column">
<div class="login" layout="row" flex style="height: 200px">
<div flex></div>
<div flex layout="column" layout-fill>
<div flex="20" style="background-color: #87CEFA;">
flex20
</div>
<div flex="10" style="background-color: #B0E2FF;">
flex10
</div>
<div flex="30" style="background-color: #87CEFA;">
flex30
</div>
</div>
<div flex></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.js"></script>
</body>