迹忆客 专注技术分享

本教程将讨论并演示如何使用 Angular flex 布局。

Angular flex layout 是一个 Angular 组件，它实现了基于 flexbox 的响应式布局系统。它使我们能够构建在移动设备和桌面屏幕上响应良好的布局。

Flexbox 是一种布局模式，它根据可用空间和源代码中指定的顺序排列容器中的项目，这意味着它会根据屏幕大小自动调整。

这与其他布局模式（例如网格或绝对定位）不同，其中项目已明确设置位置。

基于 CSS 的 Flexbox 的问题

基于 CSS 的 flexbox 是一种创建布局的简单直观的方法，但是使用这种方法时会出现一些问题。主要问题之一是缺乏对 IE 9、IE 10、Safari 5 和 Opera 12 等旧浏览器的支持。

基于 CSS 的 flexbox 的另一个问题是它不适用于响应式设计。这是因为如果不添加额外的代码或图像，很难使布局在不同的屏幕尺寸上看起来不错。

为 flexbox CSS 生成的 CSS 数量巨大（>250k），如果我们改变布局方向，我们必须改变子 flexbox 样式。也不支持自定义媒体查询断点。

上述问题已通过使用 angular flex 布局得到解决。Angular flex 布局是一个纯 TypeScript 的 UI 布局引擎，它通过 HTML 标记（布局 API）指定布局设置。

Angular 中的 Flex 布局

Angular flex 布局是 Angular 4.0 版中引入的新布局引擎。Flex 布局是 CSS 灵活框布局模块（或简称为 flexbox）的子级。

Flex 布局允许以更自然和直观的方式指定如何在容器内布局内容。这可以通过定义中心轴来完成，它决定了弹性项目在容器中的分布方式，然后指定一个或多个辅助轴来定义它们相对于其他项目的大小和位置。

使用 Angular flex 布局的主要优点是：

• 它比其他选项更容易使用；
• 它允许你快速创建响应式设计；
• 它不像 floats 或 inline-block 那样只局限于两个维度；
• 它比 CSS Grid 有更多的选择。

要使用标准 CSS flexbox 或 CSS 网格创建响应式布局，我们必须使用媒体查询编写复杂的 CSS 代码。理解起来也很有挑战性。

但是，我们可以使用 flexbox 属性直接在 HTML 模板中使用新的 Angular flexbox 布局声明 flexbox 布局参数。

在 Angular 中实现 Flex 布局的步骤

Angular flex 布局使开发人员能够创建响应式 UI 布局。它旨在用于浏览器并支持移动和桌面环境。

本教程将引导你完成以下步骤：

• 使用 Angular CLI 创建一个新项目。
• 添加 Bootstrap CSS 框架。
• 为你的项目添加一个 flex 布局模块。
• 添加一个容器组件。
• 创建两个组件（页眉和页脚组件）。
• 在容器组件上实现 flex-direction 属性。

让我们使用上面提到的步骤讨论一个 Angular flex 布局示例。

TypeScript 代码：

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent  { }

HTML 代码：

<div fxLayout="column" fxLayoutAlign="center">
<mat-card fxFlex="100">
<div fxLayout="column">
    <div fxFlex="60" class="action-blurb">Home</div>
    <div fxFlex="90" class="action-blurb" fxFlexOffset="20">Contact US</div>
</div>
</mat-card>
</div>