Angular中Flex布局的使用详解与示例

介绍

说起布局这事儿，在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组件。