angular flex layout examples

Example 1: import angular flex layout

npm install --save @angular/flex-layout @angular/cdk

Example 2: import angular flex layout

import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
imports: [ FlexLayoutModule ],
});

Example 3: placing card on center in angular flex layout

mat-card{
    width: 350px;
    height: 400px;
    display: block;
    margin-left:auto;
    margin-right:auto;  
    vertical-align:middle;
}

Example 4: fxflex responsive example

<div fxLayout="row">
<div class="sub-section-1"></div>
<div class="sub-section-2"></div>
</div>

Example 5: angular flex layout

/* Answer to: "angular flex layout" */

/*
  Angular Flex Layout provides a sophisticated layout API using
  Flexbox CSS + mediaQuery. This module provides Angular developers
  ith component layout features using a custom Layout API,
  mediaQuery observables, and injected DOM flexbox-2016 CSS stylings.
  
  You can download it here: 
  https://www.npmjs.com/package/@angular/flex-layout
  
  It also has a github repository page:
  https://github.com/angular/flex-layout
  
  Don't forget to check out the wiki:
  https://github.com/angular/flex-layout/wiki
*/