Угловой 5 материал flex-layout fxLayoutAlign = "пространственно-равномерный центр" не работает

Question

Я использую Angular 5 и материальные темы, я пытаюсь разметить некоторые входные данные формы, чтобы они выглядели вот так

По приведенной выше ссылке рекомендуется использовать такой div:

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

Я пытался использовать это в своем приложении, но он не выделяет их, пожалуйста, посмотрите этот пример стекаблика , чтобы получить полное представление о проблеме

Answer 1

На странице npm @ angular / flex-layout не упоминалось, что нам нужно импортировать модуль в app.module, поэтому я предположил, что он может быть включен по умолчанию в угловом некоторые другие основные угловые модули

Однако, согласно этой странице , нам нужно импортировать ее следующим образом:

Чтобы использовать @ angular / flex-layout, вам необходимо:

1 - установите его, используя npm

npm i @angular/flex-layout --save

2 - импортируйте его в файл app.module для углового приложения, чтобы оно работало

Хотя это является базовым для большинства модулей, я не увидел его в демоверсии, поэтому забыл об этом.

В app.module.ts его необходимо импортировать следующим образом:

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

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

полный пример стекаблиц здесь

Примечание:

Я собирался опубликовать этот вопрос, но потом я нашел решение и подумал поделиться им, чтобы помочь кому-то еще с подобной проблемой