Declarative API Overview

Static API Overview

The Flex Layout features provide smart, syntactic directives to allow developers to easily and intuitively create responsive and adaptive layouts using Flexbox CSS.

The Flex-Layout API is an intuitive list of HTML directives (aka attributes) that can be used on HTML containers and elements. Instead of using traditional CSS stylesheets, developers will define their layouts declaratively directly in the HTML.

An important [fundamental] concept is understanding which APIs are used on DOM containers versus APIs used on DOM child elements in those containers.

API for DOM containers:

HTML API	Allowed values
fxLayout	<direction> | <direction> <wrap> Use: row | column | row-reverse | column-reverse
fxLayoutAlign	<main-axis> <cross-axis> main-aixs: start |center | end | space-around | space-between cross-axis: start | center | end | stretch
fxLayoutGap	% | px | vw | vh

These directives ^ affect the flow and layout children elements in the container

API for DOM elements:

HTML API	Allowed values
fxFlex	"" | px | % | vw | vh | <grow> <shrink> <basis>,
fxFlexOrder	int
fxFlexOffset	% | px | vw | vh
fxFlexAlign	start | baseline | center | end
fxFlexFill

These directives ^ affect the layout and size of the host element. Note the API expects their elements to inside a DOM container which is itself using the Layout API for containers.

API for any element:

HTML API	Allowed values
fxHide	TRUE | FALSE | 0 | ""
fxShow	TRUE | FALSE | 0 | ""
ngClass	@see ngClass
ngStyle	@see ngStyle

Shown below is sample HTML markup that uses both the container and element Static API:

<div fxLayout='column' class="zero">

  <div fxFlex="33"                          class="one" ></div>
  <div fxFlex="33%" [fxLayout]="direction" class="two">

    <div fxFlex="22%"    class="two_one"></div>
    <div fxFlex="205px"  class="two_two"></div>
    <div fxFlex="30"     class="two_three"></div>

  </div>
  <div fxFlex class="three"></div>

</div>

Flex Layout directives assign CSS styles directly in-line to the host element. These in-line styles override inherited styles, ShadowDOM styles and even ShadowDOM tree stylings on the element :host

Responsive API

The API outline above is considered static as it is not responsive to changes in viewport sizes. Flex-Layout also has a huge set of responsive features that enable the API to elegantly respond to viewport size changes.

See the our documentation on Responsive API.