Angular-material flex 什么都不做
[英]Angular-material flex does nothing
问题描述
I'd like to create a login page with angular-material's layout directive, but I ran into a problem with flex .
我想使用 angular-material 的布局指令创建一个登录页面，但我遇到了flex问题。 At line 8 shouldn't flex=10 have to set the div 's height to 10%?在第 8 行不应该flex=10必须将div的高度设置为 10%？ Am I miss something important?我错过了什么重要的事情吗？
Thank you in advance for any kind of help!在此先感谢您的任何帮助！
* > 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>
PS.: I'm using chrome 49.0.2623.112 m (64-bit) PS.：我使用的是 chrome 49.0.2623.112 m（64 位）
1 个解决方案
解决方案1
1 已采纳 2016-04-19 11:24:32
If you define a height for outer div and layout-fill attribute for your container, it should work.如果您为容器定义外部 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.