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

更新时间：2024年02月18日 10:31:28 作者：白如意i

在本教程中,您使用 Flex 布局与 Angular 应用程序,它允许您构建一个布局,使用预配置的 Flexbox CSS 样式,而无需额外的样式,对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"
     fxLayout
     fxLayoutAlign="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"
     fxLayout
     fxLayoutAlign="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"
     fxLayout
     fxLayout.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"
     fxLayout
     fxLayout.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"
     fxLayout
     fxLayoutAlign="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"
     fxLayout
     fxLayout.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"
     fxLayout
     fxLayoutAlign="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"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
>
  <div class="item item-4"
       fxFlex
       fxFlexOffset="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 组件。

到此这篇关于在Angular 中使用 Flex 布局的示例详解的文章就介绍到这了,更多相关Angular使用 Flex 布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解如何将angular-ui的图片轮播组件封装成一个指令
本篇文章主要介绍了如何将angular-ui的图片轮播组件封装成一个指令，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
angularJs关于指令的一些冷门属性详解
下面小编就为大家带来一篇angularJs关于指令的一些冷门属性详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
angular.js + require.js构建模块化单页面应用的方法步骤
这篇文章主要给大家介绍了关于利用angular.js + require.js构建模块化单页面应用的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07
AngularJS实践之使用ng-repeat中$index的注意点
最近通过客户的投诉主要到在ng-repeat中使用了$index引发的一个bug，下面一起来看看这个错误是如何引发的, 以及如何避免这种bug产生,然后说说我们从中得到的经验和教训。有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-12-12
Angularjs中controller的三种写法分享
这篇文章给大家介绍了angularjs中controller的三种写法，每种写法都给出了示例代码，对大家理解和学习很有帮助，有需要的朋友们可以参考借鉴。
2016-09-09
AngularJS基础 ng-click 指令示例代码
本文介绍AngularJS ng-click 指令,这里整理了ng-click指令的基础知识并且附有简单示例代码和实现效果图,有需要的小伙伴参考下
2016-08-08
AngularJs表单验证实例详解
这篇文章主要介绍了用AngularJs验证表单实例详解的相关资料,需要的朋友可以参考下
2016-05-05
AngularJS 限定$scope的范围实例详解
这篇文章主要介绍了AngularJS 限定$scope的范围实例详解的相关资料,需要的朋友可以参考下
2017-06-06
详解Angularjs中的依赖注入
这篇文章主要为大家详细介绍了Angularjs中的依赖注入，AngularJS提供了一个至高无上的依赖注入机制，感兴趣的小伙伴们可以参考一下
2016-03-03
详解支持Angular 2的表格控件
本文主要对支持Angular2的表格控件进行详细介绍。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01