Categories: AngularJS

Flexbox layout with Angular and Flex-Layout

What are you using to create a grid layout with Angular? Whatever it is, Bootstrap or Material or something else, you should try the CSS flexbox layout system instead. Using the flex-layout Angular module you can create a responsive web app effortlessly.

Angular responsive mobile layout using flex-layout

They have a demo online that shows all sorts of different layouts that you can create using flex-layout.

To use it with Angular, after installing it, you just have to use the fxLayout and fxLayoutAlign attributes.

Angular responsive layout using flex and layout-wrap and the flex-layout module

Here’s an example of using flex-layout:

<div fxLayout="row">
  <div fxFlex fxFlexOrder="-1">
    <p>This is an example of a flexbox CSS layout using Angular</p>
  </div>
  <div fxFlex fxFlexOrder="1" fxFlexOrder.gt-md="3">
    <p fxHide="false" fxHide.gt-md>Hello</p>
    <p fxShow="false" fxShow.gt-md>world!</p>
  </div>
  <div fxFlex fxFlexOrder="2">
    <p>Cool</p>
  </div>
  <div fxFlex fxFlexOrder="3" fxFlexOrder.gt-md="1">
    <p fxHide="false" fxHide.gt-md>Another way</p>
    <p fxShow="false" fxShow.gt-md>to say hello world</p>
  </div>
</div>

Now you are not constrained by Bootstrap or Material or some other layout module, you can use CSS flexbox to lay out a responsive and elegant Angular grid layout.

Want to learn more AngularJS?

Check out the resources at Learning AngularJS

Rudolf Olah is a software development expert with over 8 years of professional software developer experience. He has produced the video courses "Reactive Programming in Python with RxPy, PyQt5 and Tornado" and "Learning AngularJS Testing" for PacktPublishing. Rudolf offers web development training courses for individual developers and for web development teams. He writes about tech leadership, career coaching and project management.