介绍
说起布局这事儿，在Angular生态里，Flex Layout绝对算是一个相当趁手的工具。它本质上就是一个基于CSS Flexbox的组件引擎，只不过通过一组精心设计的指令，让页面布局变得异常顺手。
这个库完全用TypeScript编写，所以不需要额外引入CSS样式表。另外值得一说的是，它还支持在不同断点下指定不同的指令，用来创建响应式布局。怎么实现？等会你就知道了。
这篇文章我们会一步步搭建一个Angular示例应用，并用Flex Layout来排列里面的项目。
先决条件
要完成本教程，你需要在本地安装Node.js。如果还没搞定，可以参考《如何安装 Node.js 并创建本地开发环境》来操作。此外，具备一些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
在浏览器里访问本地应用（通常地址是localhost:4200），你会看到一条“angular-flex-example app is running!”的消息。有了这个基础结构，就可以在模板中使用Flex Layout了。
步骤2 — 用Flex Layout做点实验
接下来，我们来修改app.component.html模板，开始使用FlexLayoutModule。下面这张图展示了本教程最终要实现的效果：
!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替换现有代码：
Item 1
Item 2
Item 3
Item 4
Item 5
重新编译后，在浏览器里访问应用，你会发现五个
一个接一个地堆叠在一起。接下来，给它加上fxLayout：
Item 1
Item 2
Item 3
Item 4
Item 5
这会在容器
上应用display: flex和flex-direction: row。重新编译后访问应用，你会看到顶部一行有三个
，底部一行有两个
。
接下来，加上fxLayoutAlign和fxLayoutGap：
Item 1
Item 2
Item 3
Item 4
Item 5
这段代码在容器
上应用了place-content: stretch center和align-items: stretch，同时给flex项目之间加了10px间隙。
再进阶一点，试试用响应式后缀在特定断点上改变flexbox样式：
Item 1
Item 2
Item 3
Item 4
Item 5
这会为xs（extra small）屏幕尺寸设置断点。布局从默认的"row"变为"column"，间隙从"10px"变为"0"。重新编译后访问应用，把浏览器窗口宽度拖到小于599px，布局会自动发生变化。
除了xs，还有这些断点别名可用：
sm— 小屏幕md— 中屏幕lg— 大屏幕xl— 超大屏幕
此外，还有一些指令可以添加到子元素上。先试试fxFlex：
Item 1
Item 2
Item 3
Item 4
Item 5
这会应用flex-grow: 1、flex-shrink: 1和flex-basis: 100%。如果指定了宽度值，则会应用max-width属性。
接下来，再加上fxFlexOrder和fxFlexOffset：
Item 1
Item 2
Item 3
Item 4
Item 5
这段代码给第二个项目应用了order: 3，给第四个项目应用了margin-left: 50px。重新编译后访问应用，你会发现第二个项目跑到了行的第三个位置，第四个项目离flexbox的起始位置有50px的间隙。这就是用Flex Layout做实验的完整过程了。
结论
本教程中，我们在Angular应用里使用了Flex Layout。它让你可以用预配置的Flexbox CSS样式来构建布局，完全不需要额外维护样式表。如果你想深入了解所有可用的指令，可以查阅API概述。
这里硬编码了指令的值，但你完全可以用数据绑定来绑定组件类中的变量（例如[fxLayout]="direction"）。这样一来，你就可以构建出高度动态、用户可控制的布局。另外，Flex Layout也可以和Angular Material结合使用，来实现Material Design组件。
