有角度的材料弯曲没有任何作用

Angular-material flex does nothing

本文关键字：任何 作用 弯曲 材料      更新时间：2023-09-26

我想用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.：我使用的是铬49.0.2623.112米（64位）

如果您为容器的外部div和布局填充属性定义了一个高度，那么它应该可以工作。

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

相关文章：