Angular and Javascript blog

Angular Flex Layout

Sharing is caring!

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:

layout see angular/flex-layout

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:

HTML API Allowed values
fxLayout row | column | row-reverse | column-reverse
fxLayoutAlign start|center|end|space-around|space-betweenstart|center|end|stretch
fxLayoutWrap "" | wrap | none | nowrap | reverse
fxLayoutGap %, px, vw, vh

API for DOM elements:

fxFlex “” , px , %, vw, vh, ” “,
fxFlexOrder int
fxFlexOffset %, px, vw, vh
fxFlexAlign start|baseline|center|end
fxFlexFill

API for any element:

HTML API Allowed values
fxHide TRUE, FALSE, 0, “”
fxShow TRUE, FALSE, 0, “”

Breakpoint aliases:

breakpoint mediaQuery
“” ‘screen’
xs ‘screen and (max-width: 599px)’
gt-xs ‘screen and (min-width: 600px)’
sm ‘screen and (min-width: 600px) and (max-width: 959px)’
gt-sm ‘screen and (min-width: 960px)’
md ‘screen and (min-width: 960px) and (max-width: 1279px)’
gt-md ‘screen and (min-width: 1280px)’
lg ‘screen and (min-width: 1280px) and (max-width: 1919px)’
gt-lg ‘screen and (min-width: 1920px)’
xl ‘screen and (min-width: 1920px)’

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

Flex layout example

Flex layout example

Let’s explain each section:

  • 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.
  • On the second row (line 13 to 17) the horizontal alignment is space-around and vertically is center.
  • On the third one (line 20 to 24) the horizontal alignment is begin and vertically is center.
  • On the forth one (line 27 to 33) the two block are horizontally aligned by default and for smaller devices (xs and sm) are vertically aligned.

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!