API Documentation

HTML API (Declarative)

Below are the links to the documentation pages for each directive within the @angular/flex-layout API.

Containers

API for container elements [with 1 or more nested child elements]:

• fxLayout:
  Defines the flow order of child items within a flexbox container.
  e.g. <div fxLayout="column"> </div>
   
• fxLayoutWrap :
  Defines if child items appear on a single line or on multiple lines within a flexbox container.
  e.g. <div fxLayoutWrap> </div>
   
• fxLayoutGap:
  Defines if child items within a flexbox container should have a gap.
  e.g. <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.
  e.g. <div fxLayoutAlign="start stretch"> </div>

#### Child Elements within Containers

API for elements nested within FlexBox container elements:

• fxFlex
  This markup specifies the resizing of its host element within a flexbox container flow.
  e.g. <div fxFlex="1 2 calc(15em + 20px)"></div>

• fxFlexOrder
  Defines the order of a flexbox item.
  e.g. <div fxFlexOrder="2"></div>

• fxFlexOffset
  Offset a flexbox item in its parent container flow layout.
  e.g. <div fxFlexOffset="20px"></div>

• fxFlexAlign
  Works like fxLayoutAlign, but applies only to a single flexbox item, instead of all of them.
  e.g. <div fxFlexAlign="center"></div>

• fxFlexFill
  Maximizes width and height of element in a layout container
  e.g. <div fxFlexFill></div>

JavaScript API (Imperative)

The programmatic API for flex-layout is deliberately minimized.