前言
@angular/flex-layout 是 Angular 的响应式布局库，是一个官方推荐的库，便于使用响应式设计和实现可扩展性的应用程序布局。本文介绍在 Angular 中使用该包的详细步骤和示例代码。
安装
在终端中输入以下命令来安装该包：
npm install @angular/flex-layout --save
使用
要使用 @angular/flex-layout，必须先导入 FlexLayoutModule。
在 AppModule 中：
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ---------------- - ---- ----------------------- ----------- -------- --------------- ------------------ ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
然后，你就可以在 HTML 中使用 flex 布局了：
<div fxLayout="row" fxLayoutAlign="start center"> <div fxFlex="50">Flex item #1 (50%)</div> <div fxFlex="50">Flex item #2 (50%)</div> </div>
上述代码定义了一个横向的 row 布局，包含两个等宽的子元素。其中，fxLayout 告诉容器该使用哪种布局，fxFlex 告诉元素应占容器的多少空间，fxLayoutAlign 告诉容器如何对齐子元素。
常用的 fx 说明
下面列出 @angular/flex-layout 中最常用的 fx 说明：
| 说明 | 功能 |
|---|---|
| fxLayout | 定义容器的布局方向 |
| fxFlex | 定义子元素占用容器的空间大小 |
| fxLayoutAlign | 定义容器内子元素的垂直和水平对齐方式 |
| fxLayoutGap | 定义子元素之间的距离 |
| fxHide | 隐藏某个元素（默认隐藏，传递参数会显示） |
| fxShow | 显示某个元素（默认显示，传递参数会隐藏） |
常见问题
1. @angular/flex-layout 如何使用内置主题？
@angular/flex-layout 默认提供了两个内置的主题，分别是 light 和 dark。可以通过 FlexLayoutModule 的 forRoot 和 forFeature 方法引入，示例如下：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -----------------------
------ - --------------- - ---- ---------------------
-----------
-------- -
--------------
-------------------------------- ----------
-- --
----------------------------------- ---------
--
------------- ------------------
---------- -----------------
--
------ ----- --------- - -其中 forRoot 方法是在应用程序的根模块中引入内置主题，forFeature 方法是在应用程序的特性模块中引入内置主题。
2. 在 Angular 中使用 mat-grid-list 和 @angular/flex-layout 有什么区别？
mat-grid-list 是 Angular Material 中用于网格布局的组件，而 @angular/flex-layout 是官方推荐的用于响应式设计的布局库。如果只使用 mat-grid-list，无法实现响应式设计，需要使用 @angular/flex-layout。
3. 如何在 @angular/flex-layout 中实现等比例的图片？
可以在 HTML 中使用 fxLayout="row wrap" 和 fxLayoutAlign="start stretch"，如下：
<div fxLayout="row wrap" fxLayoutAlign="start stretch">
<div fxFlex="25" *ngFor="let item of items;">
<img [src]="item.src" fxFill>
</div>
</div>其中 fxLayoutAlign="start stretch" 会拉伸图片，使其水平排列并填充整个容器。具体效果如下：
结论
@angular/flex-layout 是 Angular 中灵活性最高的响应式布局库之一。通过该库，可以轻松让 Angular 应用程序在不同的屏幕大小和设备上呈现出不同的布局。希望本文对您学习 @angular/flex-layout 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/200816