Home

Thomas Burleson edited this page Dec 23, 2016 · 26 revisions

Flex Layout

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

The 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 Flexbox CSS.

css3-flexbox-model

Static Layouts

The Angular Flexbox 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 with hierarchical DOM structures. Since the Layout applies/injects Flexbox CSS, DOM 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"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div> 

Note: the above Flex-Layout usages do not require any external stylesheets nor any custom CSS programming. The Angular directives do all the work of magically setting the flexbox css styles.

Responsive Layouts

Integrating mediaQuery features into the Layout engine enables the API to be Responsive: DOM elements can adjust layout-directions, visibility, and sizing constraints based on specific viewport sizes such as desktop or mobile devices.

<div class="flex-container" 
     fxLayout="row" fxLayout.xs="column" 
     fxLayoutAlign="center center" fxLayoutAlign.xs="start start">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div> 


Using Flex-Layout

Angular Flex Layout is a pure-Typescript Layout engine; unlike the pure CSS-only implementations published in other Flexbox libraries and the JS+CSS implementation of Angular Material v1.x Layouts.

  • This implementation of Angular Flex Layouts is independent of Angular Material (v1 or v2).
  • This implementation is currently only available for Angular (v2.x and higher) applications.



Quick Links

Developers

Demos

Templates


Why choose Flex-Layout

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.x or higher) Applications.
  • is independent of Angular Material (v1 or v2).
  • requires no external stylesheets.
  • requires Angular v2.x or higher.


Browser Support

caniuseflexbox


Featured Demo

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:

screen shot 2016-12-16 at 1 00 51 pm

Source Code:

screen shot 2016-12-16 at 1 05 45 pm



Advantages

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