Flex-Layout Template (using latest, master build from github.com/angular/flex-layout-builds).

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>Flex-Layout Template</title>
    <link rel="stylesheet" href="assets/style.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
    <!-- Polyfills -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
    <script src="https://unpkg.com/systemjs@0.19.41/dist/system.src.js"></script>

    <script src="lib/config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <test-app>
    loading...
  </test-app>
  
  <div style="padding-top:50px;font-size:0.7em;color:gray;">
  
  @angular/flex-layout version: 
  <a href="http://www.github.com/angular/flex-layout-builds">
    <span style="color:#3949ab;">HEAD</span>    
  </a>
  
  </div>
  
  </body>

</html>

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
      // Copy of compiler options in standard tsconfig.json
      "target": "es5",
      "module": "es2015",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
  },
  meta: {
      'typescript': {
        "exports": "ts"
      }
    },  
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',

    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
    '@angular/flex-layout' : 'https://rawgit.com/angular/flex-layout-builds/master/bundles/flex-layout.umd.js',
    '@angular/material' : 'npm:@angular/material/bundles/material.umd.js',
    
    // other libraries
    'rxjs':                      'npm:rxjs',
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
    'typescript':                'npm:typescript@2.0.10/lib/typescript.js',    
  },
  //packages defines our app package
  packages: {
    app: {
      main: './boot.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app/test-app-module';

platformBrowserDynamic().bootstrapModule(AppModule);

import { Component, NgModule, VERSION } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'test-app',   
  template: `
<md-card>
<md-card-content>
  <div fxLayout="row" fxLayoutAlign="space-between start" [style.margin-top]="'20px'">
    <div fxFlex="45%" [style.width]="'100%'">
      <div fxLayout="column" fxLayoutAlign="space-between space-between">
        <div fxFlex>
          md-select
        </div>
        <div fxFlex>
          md-select
        </div>
        <div fxFlex>
          md-select
        </div>
        <div fxFlex [style.margin-top]="'5px'">
          input
        </div>
      </div>
    </div>
    
    <div fxFlex="50%" [style.width]="'100%'">
      <div fxLayout="column">
        <div fxFlex>
          input
        </div>
        <div fxFlex>
          input
        </div>
      </div>
    </div>
    
  </div>   
  
  <div fxLayout="row" fxLayoutAlign="end end" fxLayoutGap="10px">
    <div fxFlex [style.text-align]="'right'" [style.margin-right]="'10px'">
      md-radio
    </div>
    <div fxFlex="nogrow" [style.text-align]="'right'">
      <button type="button" md-raised-button color="warn">Cancelar</button>
    </div>
    <div fxFlex="nogrow" [style.text-align]="'right'">
      <button type="button" md-raised-button color="primary">Gravar</button>
    </div>
  </div>
  </md-card-content>
</md-card>
  `
})
export class AppComponent {  
  private version: string;
  private name: string;
  constructor() {
    this.name = 'Angular'
    this.version = VERSION.full
  }
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdTabsModule, MdCardModule,MdButtonModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './test-app';

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    BrowserAnimationsModule,
    MdTabsModule, 
    MdButtonModule,
    MdCardModule,
    FlexLayoutModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: []
})
export class AppModule {}

.containerX {
  border: solid 1px #b6b6b6;
}

.colorNested, .colored, .coloredContainerX {
  height:200px;
}

md-card {
  background-color: white;
}

div.coloredContainerX > div, div.colorNested > div > div {
  padding: 8px;
  box-shadow: 0px 2px 5px 0 rgba(52, 47, 51, 0.63);
  opacity: 0.9;
  color: #fff;
  text-align: center;
}

div.coloredContainerX > div:nth-child(1), div.colorNested > div > div:nth-child(1) {
  background-color: #009688;
}

div.coloredContainerX > div:nth-child(2), div.colorNested > div > div:nth-child(2) {
  background-color: #3949ab;
}

div.coloredContainerX > div:nth-child(3), div.coloredChildren > div:nth-child(3), div.colorNested > div > div:nth-child(3) {
  background-color: #9c27b0;
}

div.coloredContainerX > div:nth-child(4), div.coloredChildren > div:nth-child(4), div.colorNested > div > div:nth-child(4) {
  background-color: #b08752;
}

div.coloredContainerX > div:nth-child(5), div.coloredChildren > div:nth-child(5), div.colorNested > div > div:nth-child(5) {
  background-color: #5ca6b0;
}

div.colored > div {
  padding: 8px;
  box-shadow: 0px 2px 5px 0 rgba(52, 47, 51, 0.63);
  opacity: 0.9;
  color: #fff;
  text-align: center;
}

div.colored > div:nth-child(1), .one {
  background-color: #009688;
}

div.colored > div:nth-child(2), .two {
  background-color: #3949ab;
}

div.colored > div:nth-child(3), .three {
  background-color: #9c27b0;
}


div.colored > div:nth-child(4), .four {
  background-color: #8bc34a;
}

div.colored > div:nth-child(5), .five {
  background-color: #03A9F4;
}

div.colored > div:nth-child(6), .six {
  background-color: #c9954e;
}

div.colored > div:nth-child(7), .seven {
  background-color: #FF5722;
}

.hint {
  margin:5px;
  font-size:0.9em;
  color: #a3a3a3;
  margin-bottom:0;
}

.title {
  margin:5px;
  font-size:0.9em;
  color: #5c5c5c;
}

.box {
  border: solid 1px gray;
}


button.md-primary {
  margin-left:25px;
}

.demo-content {
  background-color: ghostwhite;
}

md-toolbar-row  button {
  min-width: 150px;
}

div.colored.box.nopad > div {
  padding: 0;
}

.intro {
  margin-top: -52px;
  margin-left: 15px;
  color: #5c5c5c;
}

.version {
  font-size:0.8em;
  color: #aeaeae;
  margin-top:20px;
}



.blocks {
  min-width: 75px;
  min-height: 50px;
}


html, body {
      height:100%;
      min-height:100vh;
}