简述网站建设的基本过程,南通城市建设集团网站,提高网站建设水平意见方案,网页美工设计（第2版）介绍
Flex Layout 是一个组件引擎#xff0c;允许您使用 CSS Flexbox 创建页面布局#xff0c;并提供一组指令供您在模板中使用。
该库是用纯 TypeScript 编写的#xff0c;因此不需要外部样式表。它还提供了一种在不同断点上指定不同指令以创建响应式布局的方法。
在本教…介绍
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 --stylecss --routingfalse --skip-tests这将配置一个新的 Angular 项目样式设置为 “CSS”而不是 “Sass”、“Less” 或 “Stylus”没有路由并且将跳过测试。
导航到新创建的项目目录
cd angular-flex-example从您的项目文件夹中运行以下命令以安装 Flex Layout
npm install angular/flex-layout10.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 classcontainerdiv classitem item-1Item 1/divdiv classitem item-2Item 2/divdiv classitem item-3Item 3/div
/divdiv classcontainerdiv classitem item-4Item 4/divdiv classitem item-5Item 5/div
/div重新编译后在 Web 浏览器中访问您的应用程序。现在您将看到五个 div 堆叠在一起。
接下来添加 fxLayout
div classcontainerfxLayout
div classitem item-1Item 1/divdiv classitem item-2Item 2/divdiv classitem item-3Item 3/div
/divdiv classcontainerfxLayout
div classitem item-4Item 4/divdiv classitem item-5Item 5/div
/div此代码将在容器 div 上应用 display: flex 和 flex-direction: row 样式。
重新编译后在 Web 浏览器中访问您的应用程序您将看到三个 div 共享顶部行以及两个 div 共享底部行。
接下来添加 fxLayoutAlign 和 fxLayoutGap
div classcontainerfxLayoutfxLayoutAligncenterfxLayoutGap10px
div classitem item-1Item 1/divdiv classitem item-2Item 2/divdiv classitem item-3Item 3/div
/divdiv classcontainerfxLayoutfxLayoutAligncenterfxLayoutGap10px
div classitem item-4Item 4/divdiv classitem item-5Item 5/div
/div此代码将在容器 div 上应用 place-content: stretch center 和 align-items: stretch 样式。它还将在 flex 项目之间应用 10px 的间距。
接下来使用响应式后缀在特定断点上更改 flexbox 样式
div classcontainerfxLayoutfxLayout.xscolumnfxLayoutAligncenterfxLayoutGap10pxfxLayoutGap.xs0
div classitem item-1Item 1/divdiv classitem item-2Item 2/divdiv classitem item-3Item 3/div
/divdiv classcontainerfxLayoutfxLayout.xscolumnfxLayoutAligncenterfxLayoutGap10pxfxLayoutGap.xs0
div classitem item-4Item 4/divdiv classitem item-5Item 5/div
/div此代码将在 xs额外小屏幕尺寸上设置断点。它将把布局从默认的 row 更改为 column并将间距大小从 10px 更改为 0。
重新编译后在 Web 浏览器中访问您的应用程序。调整浏览器窗口大小至 xs 断点宽度小于 599px观察样式的变化。
各种屏幕尺寸的断点别名可用
sm - 小md - 中lg - 大xl - 额外大
还有可以添加到子元素的指令。
接下来添加 fxFlex
div classcontainerfxLayoutfxLayoutAligncenterfxLayoutGap10px
div classitem item-1fxFlex15%Item 1/divdiv classitem item-2fxFlex20%Item 2/divdiv classitem item-3fxFlexItem 3/div
/divdiv classcontainerfxLayoutfxLayout.xscolumnfxLayoutAligncenterfxLayoutGap10px
div classitem item-4fxFlexItem 4/divdiv classitem item-5fxFlex200pxItem 5/div
/div此代码将应用 flex-grow: 1、flex-shrink: 1 和 flex-basis: 100%。通过指定宽度值它将应用 max-width 属性。
接下来添加 fxFlexOrder 和 fxFlexOffset
div classcontainerfxLayoutfxLayoutAligncenterfxLayoutGap10px
div classitem item-1fxFlex15%Item 1/divdiv classitem item-2fxFlex20%fxFlexOrder3Item 2/divdiv classitem item-3fxFlexItem 3/div
/divdiv classcontainerfxLayoutfxLayout.xscolumnfxLayoutAligncenterfxLayoutGap10px
div classitem item-4fxFlexfxFlexOffset50pxItem 4/divdiv classitem item-5fxFlex200pxItem 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 组件。
