Skip to content

Home

Jump to bottom
Thomas Burleson edited this page May 17, 2017 · 49 revisions

Flex Layout

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 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

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 (v4.1 and higher) applications.

Recent changes to AOT support and Renderers require v4.1. Support for Angular 2.4.x is terminates after Beta 7.

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:

Featured

Source Code:

Feature Source

                   -   API Documentation   -   StackBlitz Template   -   Live Demos

Clone this wiki locally