基本角度材质布局/ flex示例不起作用

Question

我尝试了Angular的材料设计演示站点的基本布局/ flex示例：

https://material.angularjs.org/latest/layout/container

但无论我做什么，它都不会像解释的那样工作，只是以100％的宽度显示彼此相同的四个内部div。我尝试修改代码，因此列的宽度为50％，但仍然无效。这是我的代码：

<div layout="column">
    <div style="background-color: #3e8f3e" flex="50">First item in column</div>
    <div style="background-color: #00b3ee" flex="50">Second item in column</div>
</div>

<div layout="row">
    <div style="background-color: #eea236" flex="50">First item in row</div>
    <div style="background-color: #ce8483" flex="50">Second item in row</div>
</div>

这是输出：

有什么想法吗？

这是一个jsfiddle：

https://jsfiddle.net/v42grc01/1/

Answer 1

您错过了包含Angular材料的依赖项以及初始化 app 和控制器 - 请参阅下面的演示：

＆＃13;

＆＃13;

angular.module('app', ['ngMaterial']).controller('ctrl', function() {});

＆＃13;

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>


<div ng-app="app" ng-controller="ctrl">
  <div layout="column">
    <div style="background-color: #3e8f3e" flex="50">First item in column</div>
    <div style="background-color: #00b3ee" flex="50">Second item in column</div>
  </div>

  <div layout="row">
    <div style="background-color: #eea236" flex='50'>First item in row</div>
    <div style="background-color: #ce8483" flex='50'>Second item in row</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

@kukkuz答案的另一种选择就是使用angular-material CSS类。由于你包含了javascript文件，他的回答可能正是你要找的。

<div class="layout-column">
  <div style="background-color: #3e8f3e" class="flex">First item in column</div>
  <div style="background-color: #00b3ee" class="flex">Second item in column</div>
</div>

<div class="layout-row">
  <div style="background-color: #eea236" class="flex">First item in row</div>
  <div style="background-color: #ce8483" class="flex">Second item in row</div>
</div>

链接到角度材质layout.css

Answer 3

尝试将弹性值设置为flex="50"至flex

否则，请尝试使用您的代码发布jsFiddle