在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 布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

AngularJS自动表单验证
这篇文章主要介绍了AngularJS手动表单验证的相关资料，AngularJS的表单验证大致有两种，一种是手动验证，一种是自动验证，本文重点介绍AngularJS自动表单验证，感兴趣的小伙伴们可以参考一下
2016-02-02
angular.bind使用心得
这篇文章主要介绍了angular.bind使用心得，以及个人对于angular.bind的理解，这里分享给大家，希望大家能够喜欢。
2015-10-10
angularjs之$timeout指令详解
本篇文章主要主要介绍了angularjs之$timeout指令详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
angular双向绑定模拟探索
这篇文章主要和大家一起探索模拟angular的双向绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
利用Angular+Angular-Ui实现分页（代码加简单）
这篇文章主要介绍了利用Angular+Angular-Ui实现分页，利用Angular+Angular-Ui实现的分页分页代码更加简单，更加容易懂哦，相信本文的内容对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-03-03
angularjs中ng-attr的用法详解
这篇文章主要给大家介绍了angularjs中ng-attr的用法,文中通过实例代码介绍的很详细，有需要的朋友可以参考借鉴，下面来一起看看吧。
2016-12-12
基于angular实现三级联动的生日插件
这篇文章主要为大家详细介绍了基于angular实现三级联动的生日插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
微信+angularJS的SPA应用中用router进行页面跳转，jssdk校验失败问题解决
本文主要介绍微信+angularJS的SPA应用中用router进行页面跳转，jssdk校验失败问题解决，这里提供了详细的操作方式，有需要的小伙伴可以参考下
2016-09-09
angular中默认路由的理解用法详解
这篇文章主要介绍了angular中的默认路由的用法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-02-02
AngularJS基础 ng-if 指令用法
本文主要介绍了AngularJS ng-if 指令,在这里整理了一些ng-if 指令的基础资料,并有实例代码,有需要的同学可以参考下
2016-08-08