时间戳

首页 > 解决方案 > Angular 5 材料 flex-layout fxLayoutAlign="space-evenly center" 不起作用

css - Angular 5 材料 flex-layout fxLayoutAlign="space-evenly center" 不起作用

问题描述

我正在使用 Angular 5 和材质主题，我试图将一些同级表单输入隔开，看起来像这样

上面的链接建议使用这样的 div：

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

我尝试在我的应用程序中使用它，但它并没有将它们隔开，请查看这个 stackblitz 示例以获得该问题的完整视图

标签： cssflexboxangular5angular-material2angular-flex-layout

解决方案

在@angular/flex-layout 的 npm 页面中，没有提到我们需要在 app.module 中导入模块，所以我认为它可能会像其他一些核心 angular 模块一样默认启用 angular

但是，根据此页面，我们需要按如下方式导入它：

要使用 @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
  ],

一个完整的 stackblitz 示例在这里

笔记：

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

推荐阅读