@angular/flex-layout
(Korniychuk Anton - 7 may 2017)

1. Install
npm install --save @angular/flex-layout

2. Import module
...
import { FlexLayoutModule } from '@angular/flex-layout';
...

@NgModule({
imports: [
...
FlexLayoutModule
],
...
})
export class AppModule { }

# HTML
<div class="flexDemoContainer">
<div fxLayout="row" fxLayout.xs="column" fxLayout.sm="column">
<div fxFlex> I'm above on mobile, and left on larger devices. </div>
<div fxFlex> I'm below on mobile, and right on larger devices. </div>
</div>
</div>

# CSS
.flexDemoContainer {
border: solid 1px #red;
box-sizing: content-box !important;
}

Containers

fxLayout

# Defines the flow order of child items within a flexbox container
Values: *row column
<div fxLayout="row" fxLayout.xs="column"> </div>

fxLayoutWrap

# Defines if child items appear on a single line or on multiple lines within a flexbox container.
CSS Rule: flex-wrap
Values: *"" nowrap wrap wrap-reverse
Default: "" that means wrap

<div fxLayoutWrap> </div>

fxLayoutGap

# Defines if child items within a flexbox container should have a gap.
@ adds margin-right to each child element expect the last
Value units: % px vw vh

<div fxLayoutGap="10px"> </div>

fxLayoutAlign

# Defines how flexbox items are aligned according to both the main-axis and the cross-axis, within a flexbox container.

@ the value has 2 parts
1. main-axis (justify-content) align.
Values: none *start center end space-around space-between
2. cross-axis (align-items & align-content) align.
Values: none start center end *stretch

<div fxLayoutAlign="start stretch"> </div>

Child Elements
(within Containers)

fxFlex

# This markup specifies the resizing of its host element within a flexbox container flow.
CSS rule: flex

<div fxFlex="1 2 calc(15em + 20px)"></div>

fxFlexOrder

# Defines the order of a flexbox item.
CSS Rule: order

<div fxFlexOrder="2"></div>

fxFlexOffset

# Offset a flexbox item in its parent container flow layout.
@ adds margin-left to element.
! fxLayoutGap overlapping this option (in beta.8)

<div fxFlexOffset="20px"></div>

fxFlexAlign

# Works like fxLayoutAlign, but applies only to a single flexbox item, instead of all of them.
CSS Rule: align-self

<div fxFlexAlign="center"></div>

fxFlexFill

# Maximizes width and height of element in a layout container

<div fxFlexFill></div>

@ Adds styles:
margin: 0;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;