Create a sidebar layout using Angular Flex-Layout

I remember well the time before flex-layout, when creating a sidebar layout was kind of defeating a monster.

But luckily today we have flex-layout at disposual, which made this kind of horror a thing of the past.

Let’s get startet:

1. Install Angular Flex-Layout

Follow the installation instructions on the Angular Flex-Layout GitHub page

2. Add this configuration to your global stylesheet

Is is also recommendable to include normalize.css in your project, to fix most rendering differences between browsers.

File: src/app/ styles.css


@import "~normalize.css";

html, body {
  height: 100%;

div {
  box-sizing: border-box;

3. Create the sidebar layout using the Angular flex directives

File: Add this to your page template, e.g. src/app/pages/dashboard/dashboard.component.html


<div class="container" fxLayout="row" fxLayoutAlign="start start">

  <div class="nav-sidebar" fxFlex="230px">

  <div class="main-content" fxFlex>


File: Add this to your template styles, e.g. src/app/pages/dashboard/dashboard.component.scss


.container {
    height: 100%;

.nav-sidebar {
  height: 100%;
  background: #2A3F54;
  color: white;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

.main-content {
    height: 100%;
    background: #eeeeee;

Layout Preview:

Sidebar with Angular Flex-Layout

Leave a Reply

Your email address will not be published.