Angular Flex Layout provides a sophisticated layout API using FlexBox CSS + mediaQuery. This module provides Angular (v2.4.3 and higher) developers with component layout features using a custom Layout API, mediaQuery observables,and injected DOM flexbox-2016 css stylings.

The Flex Layout engine intelligently automates the process of applying appropriate Flexbox CSS to browser view hierarchies. This automation also addresses many of the complexities and workarounds encountered with the traditional, manual, CSS-only application of box CSS.

The real power of Flex Layout, however, is its responsive engine. The Responsive API enables developers to easily specify different layouts, sizing, visibilities for different viewport sizes and display devices.

The sources for this package are in the Flex Layout repository.
Please file issues and pull requests against that repo.

License: MIT

The latest release of Angular Flex-Layout can be installed from npm

npm install @angular/flex-layout -save

Playing with the latest changes from master is also possible

npm install https://github.com/angular/flex-layout-builds.git -save

Directive selectors are now camelCase (instead of dash-case); as specified in the Angular Style Guide (Q4, 2016):

• @Component selectors always use dash-case
• @Directive selectors always use camelCase

Except when the directive is pretending to be a component (i.e, if it had a template it would be '').

• @Directive properties are prefixed with namespace info

@Component properties are not

<div class="flex-container" 
     fxLayout="row" 
     fxLayout.xs="column"
     fxLayoutAlign="center center"
     fxLayoutAlign.xs="start">
  <div fxFlex="20%" fxFlex.xs="40%">  </div>
  <div fxFlex>        </div>
  <div fxFlex="25px"> </div>
</div> 

• Wiki Docs
• Discussion Forum

Developers

• API Overview
• Developer Setup
• Builds + Fast Start
• Integration with Angular CLI

Demos

• Explore Online
• Source Code

Templates

• Plunkr Template

While other Flexbox CSS libraries are implementations of:

• pure CSS-only implementations, or
• the JS+CSS Stylesheets implementation of Angular Material v1.x Layouts.

Angular Flex Layout - in contrast - is a pure-Typescript UI Layout engine with an implementation that:

• uses HTML attributes (aka Layout API) to specify the layout configurations
• is currently only available for Angular (v2.4.3 or higher) Applications.
• is independent of Angular Material (v1 or v2).
• requires no external stylesheets.
• requires Angular v2.4.3 or higher.

The Angular Flex Layout features enable developers to organize UI page elements in row and column structures with alignments, resizing, and padding. These layouts can be nested and easily used within hierarchical DOM structures.

The Flex Layout API is used simply as attributes on your HTML elements. That is it!

Technically the API is a set of Angular directives with intuitively-named selectors... 🤓

All the magic of applying the Flexbox CSS is handled under-the-hood. The Layout applies (injects) Flexbox CSS styles to each DOM element... and your layout and elements will fluidly update their positioning and sizes as the viewport size changes.

<div class="flex-container" fxLayout="row" fxLayoutAlign="center center">
  <div class="flex-item" fxFlex="20%">  </div>
  <div class="flex-item" fxFlex>        </div>
  <div class="flex-item" fxFlex="25px"> </div>
</div> 

The above Flex Layout usages do not require any external stylesheets nor any custom CSS programming.

Flex Layout also added mediaQuery support into the Layout engine. Integrating mediaQuery features enables the API and your Application's UX to be Responsive to changes in viewport size and orientations.

Responsive layouts have multiple layout configurations. Responsive layouts add extra configurations that override the default configurations. These overrides will be applied dynamically when the viewport size changes to match a specific responsive override.

In our previous sample (above), the Flex Layout API is used to define default, non-responsive flows and sizing. Now let's consider an HTML sample which specifies both default configurations and mobile responsive overrides:

<div class="flex-container" 
     fxLayout="row" 
     fxLayout.xs="column"
     fxLayoutAlign="center center"
     fxLayoutAlign.xs="start">
  <div class="flex-item" fxFlex="20%" fxFlex.xs="40%">  </div>
  <div class="flex-item" fxFlex>        </div>
  <div class="flex-item" fxFlex="25px"> </div>
</div> 

With Responsive configurations, DOM elements can be adjusted [for layout-directions, visibility, and sizing constraints] based on specific viewport sizes (desktop or mobile devices) and orientations (portrait or landscape).

Of course, these configuration can be specified in the CSS. Flex Layout, however, makes it super easy and intuitive to specify these configurations in the HTML layer as HTML element attributes.

One of the hardest features to implement is a grid layout with specific column spans. Our online demo shows how easy this is!

Live Demo:

Source Code:

Compared to the Layout API in Angular Material v1.x, this codebase is easier to maintain and debug. And other more important benefits have also been realized:

• Independent of Angular Material
• No external CSS requirements
• Use provider to supply custom breakpoints
• Notifications for breakpoints changes
• Includes workaround for MediaQuery issues with overlapping breakpoints
• Support (future) for Handset/Tablet and Orientation breakpoints
• Support for ANY Layout injector value (instead of increments for 5)
• Change detection for Layout injector values
• MediaQuery Activation detection
• Support for raw values or interpolated values
• Support for raw, percentage or px-suffix values