Basic Angular material layout / flex example not working

Question

I tried a basic layout/flex example from Angular's material design demo site:

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

But whatever I do, it does not work as explained and just displays the four inner divs underneath each other with 100% width. I tried modifying the code so the columns have a width of 50% but it still does not work. Here is my code:

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

Here is the output:

Any thoughts?

Here is a jsfiddle:

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

Answer 1

You missed to include the dependencies of Angular material and also to initialize the app and the controller - see demo below:

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>

Answer 2

An alternative to @kukkuz answer would be just using the angular-material CSS classes. Since you included the javascript files his answer is probably what you are looking for.

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

Link to the Angular Material layout.css