Angular-material flex 什么都不做

Question

我想用 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>

PS.: 我正在使用 chrome 49.0.2623.112 m（64 位）

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

Angular-material flex 什么都不做

Angular-material flex does nothing

javascript

angularjs

angular-material