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

$3

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

$3

Import LayoutModule and add it to the imports of your app's AppModule
``javascript
// 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 { }
`

$3


Import the required css file into your app's styles.css file
`css
/ src/styles.css /
@import "../node_modules/ng2-flex-layout/dist/ng2-flex-layout.css";
`

Usage

$3

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

example
`html



`

You can also specify different layout directions for different screen sizes
`html



`

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

$3


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

1

2

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



``