Angular 5 material flex-layout fxLayoutAlign="space-evenly center" not working

Question

I am using Angular 5 & material themes, I am trying to space out some sibling form inputs to look like this

The link above advise to use a div like this one:

div fxLayout="row" fxLayoutAlign="space-evenly center"

I tried to use this in my app but it doesn't space them out, please check out this stackblitz example for a complete view of the issue

Answer 1

In the npm page of the @angular/flex-layout, it wasn't mentioned that we need to import the module in app.module so I assumed it might be enabled by default in angular like some other core angular modules

However as per this page , we need to import it as follows:

To use the @angular/flex-layout, you have to:

1- install it using npm

npm i @angular/flex-layout --save

2- Import it in the app.module file of the angular app for it to work

Whilst this is basic for most of the modules, I didn't see it in the demo so I forgot it.

In app.module.ts, you have to import it as follows:

import { FlexLayoutModule } from "@angular/flex-layout";

@NgModule({
  imports:      [ BrowserModule, FormsModule, BrowserAnimationsModule, MatFormFieldModule, MatInputModule,
  FlexLayoutModule
  ],

a full stackblitz example is here

Note:

I was about to post this question, but then I found out the solution & I thought to share it to help someone else having similar issue