如何在 Angular 中使用 Flex 布局

介绍

Flex Layout 是一个组件引擎，允许您使用 CSS Flexbox 创建页面布局，并提供一组指令供您在模板中使用。

该库是用纯 TypeScript 编写的，因此不需要外部样式表。它还提供了一种在不同断点上指定不同指令以创建响应式布局的方法。

在本教程中，您将构建一个示例 Angular 应用程序，并使用 Flex Layout 来排列项目。

先决条件

要完成本教程，您需要：

• 本地安装 Node.js，您可以按照《如何安装 Node.js 并创建本地开发环境》进行操作。
• 一些设置 Angular 项目和使用 Angular 组件的基础知识可能会有所帮助。

本教程已使用 Node v14.13.1、npm v6.14.8、angular v10.1.6 和 @angular/flex-layout 进行验证。

步骤 1 — 设置项目

您可以使用 @angular/cli 创建一个新的 Angular 项目。

在您的终端窗口中，使用以下命令：

npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests

这将配置一个新的 Angular 项目，样式设置为 “CSS”（而不是 “Sass”、“Less” 或 “Stylus”），没有路由，并且将跳过测试。

导航到新创建的项目目录：

cd angular-flex-example

从您的项目文件夹中运行以下命令以安装 Flex Layout：

npm install @angular/flex-layout@10.0.0-beta.32

接下来，在您的应用程序模块中导入 FlexLayoutModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from "@angular/flex-layout";import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [BrowserModule,FlexLayoutModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

启动项目以验证是否有错误。

npm start

如果您在 Web 浏览器中访问本地应用程序（通常在 localhost:4200），您将看到一个 "angular-flex-example app is running!" 消息。

有了这个基本结构，您可以在模板中使用 Flex Layout。

步骤 2 — 使用 Flex Layout 进行实验

接下来，您将修改 app.component.html 模板以使用 FlexLayoutModule。

以下是在本教程中使用 Flex Layout 进行实验的最终结果的示例图：

!Flex Layout 示例截图，其中有五个不同颜色的 div。这些项目占据两行。第一行包括项目 1、2 和 3。项目 3 比 1 和 2 更宽，并显示为第二个项目。第二行包括项目 4 和 5。项目 4 比项目 5 更宽，并向左偏移。

首先，打开您的代码编辑器中的 app.component.css 并添加以下代码行：

.container {margin: 10px;
}.item {border-radius: .2em;color: #ffffff;font-family: sans-serif;font-size: 2em;padding: 4em 1em;text-transform: uppercase;
}.item-1 {background-color: #009169;
}.item-2 {background-color: #55b296;
}.item-3 {background-color: #9fd3c3;
}.item-4 {background-color: #e7b013;
}.item-5 {background-color: #073443;
}

然后，打开您的代码编辑器中的 app.component.html 并用两个容器 div 和五个内部项目 div 替换代码：

<div class="container"><div class="item item-1">Item 1</div><div class="item item-2">Item 2</div><div class="item item-3">Item 3</div>
</div><div class="container"><div class="item item-4">Item 4</div><div class="item item-5">Item 5</div>
</div>

重新编译后，在 Web 浏览器中访问您的应用程序。现在您将看到五个 div 堆叠在一起。

接下来，添加 fxLayout：

<div class="container"fxLayout
><div class="item item-1">Item 1</div><div class="item item-2">Item 2</div><div class="item item-3">Item 3</div>
</div><div class="container"fxLayout
><div class="item item-4">Item 4</div><div class="item item-5">Item 5</div>
</div>

此代码将在容器 div 上应用 display: flex 和 flex-direction: row 样式。

重新编译后，在 Web 浏览器中访问您的应用程序，您将看到三个 div 共享顶部行，以及两个 div 共享底部行。

接下来，添加 fxLayoutAlign 和 fxLayoutGap：

<div class="container"fxLayoutfxLayoutAlign="center"fxLayoutGap="10px"
><div class="item item-1">Item 1</div><div class="item item-2">Item 2</div><div class="item item-3">Item 3</div>
</div><div class="container"fxLayoutfxLayoutAlign="center"fxLayoutGap="10px"
><div class="item item-4">Item 4</div><div class="item item-5">Item 5</div>
</div>

此代码将在容器 div 上应用 place-content: stretch center 和 align-items: stretch 样式。它还将在 flex 项目之间应用 10px 的间距。

接下来，使用响应式后缀在特定断点上更改 flexbox 样式：

<div class="container"fxLayoutfxLayout.xs="column"fxLayoutAlign="center"fxLayoutGap="10px"fxLayoutGap.xs="0"
><div class="item item-1">Item 1</div><div class="item item-2">Item 2</div><div class="item item-3">Item 3</div>
</div><div class="container"fxLayoutfxLayout.xs="column"fxLayoutAlign="center"fxLayoutGap="10px"fxLayoutGap.xs="0"
><div class="item item-4">Item 4</div><div class="item item-5">Item 5</div>
</div>

此代码将在 xs（额外小）屏幕尺寸上设置断点。它将把布局从默认的 "row" 更改为 "column"，并将间距大小从 "10px" 更改为 "0"。

重新编译后，在 Web 浏览器中访问您的应用程序。调整浏览器窗口大小至 xs 断点（宽度小于 599px），观察样式的变化。

各种屏幕尺寸的断点别名可用：

• sm - 小
• md - 中
• lg - 大
• xl - 额外大

还有可以添加到子元素的指令。

接下来，添加 fxFlex：

<div class="container"fxLayoutfxLayoutAlign="center"fxLayoutGap="10px"
><div class="item item-1"fxFlex="15%">Item 1</div><div class="item item-2"fxFlex="20%">Item 2</div><div class="item item-3"fxFlex>Item 3</div>
</div><div class="container"fxLayoutfxLayout.xs="column"fxLayoutAlign="center"fxLayoutGap="10px"
><div class="item item-4"fxFlex>Item 4</div><div class="item item-5"fxFlex="200px">Item 5</div>
</div>

此代码将应用 flex-grow: 1、flex-shrink: 1 和 flex-basis: 100%。通过指定宽度值，它将应用 max-width 属性。

接下来，添加 fxFlexOrder 和 fxFlexOffset：

<div class="container"fxLayoutfxLayoutAlign="center"fxLayoutGap="10px"
><div class="item item-1"fxFlex="15%">Item 1</div><div class="item item-2"fxFlex="20%"fxFlexOrder="3">Item 2</div><div class="item item-3"fxFlex>Item 3</div>
</div><div class="container"fxLayoutfxLayout.xs="column"fxLayoutAlign="center"fxLayoutGap="10px"
><div class="item item-4"fxFlexfxFlexOffset="50px">Item 4</div><div class="item item-5"fxFlex="200px">Item 5</div>
</div>

此代码将在第二个项目上应用 order: 3。它还将在第四个项目上应用 margin-left: 50px。

重新编译后，在 Web 浏览器中访问您的应用程序，您将注意到第二个项目位于行的第三个位置，并且第四个项目距离 flexbox 起始位置有 50px 的间距。

这就是对 Flex Layout 进行简要实验的全部内容。

结论

在本教程中，您使用 Flex 布局与 Angular 应用程序。它允许您构建一个布局，使用预配置的 Flexbox CSS 样式，而无需额外的样式。

您可以参考 API 概述，以更深入地了解可用的指令。

在本例中，您硬编码了指令的值。也可以使用数据绑定来绑定到组件类中的值（例如，[fxLayout]="direction"）。这将允许您创建用户可以控制和更改的高度动态的布局。

Flex 布局还可以与 Angular Material 结合使用，用于 Material Design 组件。