ng2-flex-layout

ng2-flex-layout is a small set of Angular 2 attribute directives aimed at providing flex-box based responsive layout directives that are api-compatible with those found in Angular Material 1.

Installation/Setup

The following directions will work using the latest version of angular-cli@webpack

Install with NPM

Install with npm npm install --save ng2-flex-layout

Add Module as a Dependency to Your App

Import LayoutModule and add it to the imports of your app's AppModule

// src/app/app.module.ts
 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { LayoutModule } from 'ng2-flex-layout';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import Required CSS File

Import the required css file into your app's styles.css file

/* src/styles.css */
@import "../node_modules/ng2-flex-layout/dist/ng2-flex-layout.css";

Usage

Layout Containers

The layout directive allows you to specify a layout container and the direction in which the children will flow:

example

<div layout="row">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
</div>

You can also specify different layout directions for different screen sizes

<div layout="row" layoutXs="column">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
</div>

The container in the example above will have a flex-direction of column on extra small screen sizes and a flex-direction of row on all other screen sizes. See the Angular Material 1 documentation for breakpoint details

Layout Children

Using the flex directive on a container's child elements allows you to specify the percentage of available room each element should fill.

<div layout="row">
  <div flex="20"> 1 </div>
  <div flex="80"> 2 </div>
</div>

In the example above, the first child element will take up 20% of the available width of its parent and the 2nd child element will take up 80%.

Similar to containers, you can also specify different flex percentages for different screen sizes

<div layout="row">
  <div flex="20" flexXs="40"> 1 </div>
  <div flex="80" flexXs="60"> 2 </div>
</div>