Angular 5 material 弹性布局 fxLayoutAlign="space-evenly center" 不工作

Question

我正在使用 Angular 5 & material 主题，我正在尝试 space 输出一些同级表单输入以查看 like this

上面的link建议使用像这样的div：

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

我试图在我的应用程序中使用它，但它没有 space 它们出来，请查看 this stackblitz example 以获得问题的完整视图

Answer 1

在 npm page of the @angular/flex-layout 中，没有提到我们需要在 app.module 中导入模块，所以我假设它可能像其他核心一样在 angular 中默认启用angular 个模块

但是根据这个 page ，我们需要按如下方式导入它：

要使用@angular/flex-layout，您必须：

1- 使用 npm 安装它

npm i @angular/flex-layout --save

2- 将其导入 angular 应用程序的 app.module 文件中以使其工作

虽然这是大多数模块的基本内容，但我没有在演示中看到它，所以我忘记了。

在app.module.ts中，你要导入如下：

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

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

a full stackblitz example is here

注：

我正要 post 这个问题，但后来我找到了解决方案，我想分享它以帮助遇到类似问题的其他人