文章/答案/技术大牛

发布

社区首页 >问答首页 >未应用角度布局/伸缩

问未应用角度布局/伸缩
EN

Stack Overflow用户

提问于 2017-06-18 22:05:26

回答 1查看 890关注 0票数 2

我尝试使用angular-material layout/flex功能，但它不起作用。布局和flex指令应该被插入到class属性中，但是使用dev工具，我可以看到class属性仍然没有。

如果我显式地输入类(flex“layout-class=”class="flex“...)它起作用了。

我错过了什么？

代码如下：

<!DOCTYPE html>
<html ng-app="zz">
  <head>
    <meta charset="utf-8">
    <title>ZZZ</title>
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
    <link rel="stylesheet" href="bower_components/angular-toastr/dist/angular-toastr.css" />
    <!-- endbower -->
    <style media="screen">
      div {
        border: 1px solid black;
        padding: 5px;
        margin: 5px;
      }
    </style>
  </head>
  <body>

  <div class="container">
    Hello world from the container-div
    <div layout="row">
      <div flex>First item in row</div>
      <div flex>Second item in row</div>
    </div>
    <div layout="column">
      <div flex>First item in column</div>
      <div flex>Second item in column</div>
    </div>
  </div>

    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-messages/angular-messages.js"></script>
    <script src="bower_components/angular-material/angular-material.js"></script>
    <script src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
    <!-- endbower -->

    <script type="text/javascript">
      angular.module('zz',[]);
    </script>

  </body>
</html>

以下是我对( https://material.angularjs.org/latest/layout/container )的期望：

我得到的是：

谢谢。

angularjs

flexbox

回答 1

Stack Overflow用户

发布于 2018-11-17 05:18:10

也许最好使用css而不是自定义的AngularJS指令来对视图中的组件进行排序。这将给你更多的自由，如果你必须改变一些东西，并且可以应用于任何地方，而不仅仅是在AngularJS中

使用display: flex css属性可以轻松实现您想要实现的功能。这里有一个关于如何使用它的good explanation。

<div class="container">
  <div class="row">
    <div>First item in row</div>
    <div>Second item in row</div>
  </div> 
  <div class="column">
    <div>First item in column</div>
    <div>Second item in column</div>
  </div>
</div>

css为：

.container {
  display: flex;

  .row {
    display: flex;
  }

  .column {
    display: flex;
    flex-direction: column;
  }
}

票数 1

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

原文链接：

https://stackoverflow.com/questions/44615803

复制

相似问题

问未应用角度布局/伸缩
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未应用角度布局/伸缩EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未应用角度布局/伸缩
EN