Tutorial

Flex Layout for Angular

Angular

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

Flex Layout is a component engine that was recently announced by the Angular team. It allows to easily create Flexbox-based page layouts with a set of directives available to use in your templates. No need for separate CSS styling. The library itself is written in pure TypeScript, so no external stylesheets are needed. It also provides a way to specify different directives at different breakpoints to create responsive layouts.

Flex Layout stands on its own, and it can also be used in combination with Angular Material for Material Design components.

Installing

Install Flex Layout from npm:

$ npm install @angular/flex-layout --save

Or with Yarn:

$ yarn add @angular/flex-layout

Now import FlexLayoutModule in your app module:

Module: app.module.ts
// ...
import { FlexLayoutModule } from "@angular/flex-layout";


Flex Layout is now ready to be used in your templates.

Playing with Flex Layout

Here’s a figure showing the demo layout that we’ll be creating in this post:

Flex Layout Demo

And here’s the markup needed in our template to create the layout:

Template: app.component.html
<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0">
  <div class="item item-1" fxFlex="15%">Item 1</div>
  <div class="item item-2" fxFlex="20%" fxFlexOrder="3">Item 2</div>
  <div class="item item-3" fxFlex>Item 3</div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0">
  <div class="item item-4" fxFlex fxFlexOffset="50px"  fxFlexOffset.xs="0">Item 4</div>
  <div class="item item-5" fxFlex="200px">Item 5</div>
</div>

That’s all we need to create our layout, no CSS needed. And most of the directives are pretty self-explanatory too. In our demo, only minor styling was added like a background color and rounded corners to our items.

Here are a few takeaways:

  • The fxLayout directive on the container sets the flex container. Its value defaults to row, so we don’t need to provide any value for the default behavior.
  • We want the layout to collapse into a single column on extra-small devices, so we use the .xs notation with fxLayout to give it a direction of column. We could also use other breakpoints like sm, md, lg and xl.
  • We changed the order of the items in our 1st row by using the fxFlexOrder directive on Item 2.
  • We set gaps between flex items with fxLayoutGap.
  • The classes used on the container and items (container, item, item-1, …) are not needed by Flex Layout. They are used for our own extra styling.
  • We hard-coded the directive values in this example, but we could just as well have used data binding to bind to values in the component class (E.g. [fxLayout]="direction"). This makes it easy to create highly dynamic layouts that the user can control and change.

Further Reading

You can reference the API overview for a more in-depth look at the available directives.

0 Comments

Creative Commons License