<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script data-require="angular-animate@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
<script data-require="angular-aria@1.5.5" data-semver="1.5.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<link data-require="angular-material@*" data-semver="1.1.5" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.5/angular-material.min.css" />
<script data-require="angular-material@*" data-semver="1.1.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.5/angular-material.min.js"></script>
<script data-require="angularjs@1.6.4" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<span layout layout-align="center center">simple layout with flex elements</span>
<div class="container">
<div layout="row">
<div flex class="left">
hanni
</div>
<div flex class="right">
nachmiass
</div>
</div>
</div>
<span layout layout-align="center center">with layuout-padding </span>
<div class="container">
<div layout="row" layout-padding>
<div flex class="left">
hanni
</div>
<div flex class="right">
nachmiass
</div>
</div>
</div>
<span layout layout-align="center center">with layuout-padding and layout-margin </span>
<div class="container">
<div layout="row" layout-padding layout-margin>
<div flex class="left">
hanni
</div>
<div flex class="right">
nachmiass
</div>
</div>
</div>
<span layout layout-align="center center">with layuout-padding, layout-margin, layout-fill </span>
<div class="container">
<div layout="row" layout-padding layout-margin layout-fill>
<div flex class="left">
hanni
</div>
<div flex class="right">
nachmiass
</div>
</div>
</div>
</body>
</html>
// Code goes here
(function(){
angular.module("app",[
'ngMaterial'
])
})();
/* Styles go here */
body {
background-color:lightgrey;
padding:8px;
}
span[layout-align]{
color:blue;
}
.left{
background-color:yellow;
}
.right {
background-color:red;
}
.container {
height:120px;
}
.container > div[layout] {
border:solid 1px ;
}