基本的Angular材质布局/ flex示例不起作用

Question

我从Angular的材料设计演示站点尝试了一个基本的布局/弯曲示例：

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材质的依赖项以及初始化应用程序和控制器的信息 -请参见下面的演示：

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

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