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

【问题标题】：Basic Angular material layout / flex example not working基本 Angular 材质布局/flex 示例不起作用
【发布时间】：2017-05-02 03:30:41
【问题描述】：

我尝试了来自 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/

【问题讨论】：

标签： angularjs css flexbox angular-material

【解决方案1】：

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

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>

【讨论】：

实际上，列中的两项扩展至100%浏览器高度。你知道这是为什么吗？
你的意思是100%浏览器宽度？
前两个元素是column布局，所以horizontally沿着flexbox的cross-axis默认是align-items: stretch，它将浏览器宽度设为 100%...

【解决方案2】：

@kukkuz 答案的替代方案是使用 angular-material CSS 类。由于您包含了 javascript 文件，因此他的答案可能就是您正在寻找的。p>

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

链接到 Angular 材质 layout.css

【讨论】：

【解决方案3】：

尝试将 flex 值从 flex="50" 设置为 flex

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

【讨论】：