Angular Flex layout system using FlexBox CSS and mediaQuery

  • Angular Flex Layout provides a sophisticated layout API using FlexBox CSS + mediaQuery.
  • On the third one (line 20 to 24) the horizontal alignment is begin and vertically is center.
  • On the second row (line 13 to 17) the horizontal alignment is space-around and vertically is center.
  • On the first row (line 6 to 10) I set the first block on 20% width, the second 60% and the third fill the remain space.
  • The 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.

Angular Flex Layout provides a sophisticated layout API using FlexBox CSS with mediaQuery enabling the API to be Responsive

@JavaScriptKicks: Angular Flex Layout by @DZurico #javascript #angularjs via @JavaScriptKicks

I’m a big fan of Angular Material2 and I have been using it from the alpha version. Unfortunately Material2 didn’t have any flex layout system so you needed to use an external one.

When Material2 beta1 was released they updated the readme.md file with amazing news:

this library is still in beta1 but according to my experience it looks stable and ready to use and you don’t need Angular Material2 or any other frameworks to use it.

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

To install it run:

npm install @angular/flex-layout -save

And then import the FlexLayoutModule:

The public Layout API is a simple list of HTML attributes that can be used on HTML containers and elements.

API for DOM containers:

API for DOM elements:

API for any element:

Now that we know all the directives let’s try to use them.

Let’s explain each section:

Of course this post doesn’t show all the features of this amazing library but if you want to become a master have a look at the official documentation.

If you enjoyed this post follow me on twitter @Dzurico!

Angular Flex layout system using FlexBox CSS and mediaQuery

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.