文章/答案/技术大牛

发布

社区首页 >问答首页 >Angular-material flex不执行任何操作

问Angular-material flex不执行任何操作
EN

Stack Overflow用户

提问于 2016-04-19 18:27:57

回答 1查看 10.6K关注 0票数 1

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

附言:我使用的是chrome 49.0.2623.112m(64位)

javascript

angularjs

angular-material

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-04-19 19:24:32

如果您为容器定义了your 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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36715701

复制

相似问题

问Angular-material flex不执行任何操作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular-material flex不执行任何操作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular-material flex不执行任何操作
EN