Angular Flex 布局

Angular flex-layout 是由 Angular 团队开发的独立库，用于设计复杂的布局。Angular Layout 使用 Flexbox 提供了一个复杂的 API。该模块通过自定义布局 API 为 Angular 开发者提供组件布局功能。

在 Angular 中创建 HTML 页面时，我们可以使用 angular flex-layout 轻松创建基于 flexbox 的页面布局，它提供了一组可在模板中使用的指令。这消除了编写单独 CSS 样式的需要。

在普通的 CSS Flexbox 或 CSS Grid 中，响应式布局是使用复杂的 CSS 代码和媒体查询创建的。

强大的布局功能

Flex-Layout 是一个基于 TypeScript 的 UI 布局引擎，它使用 HTML 标记来指定布局配置。

Flex 容器的 Flexbox 布局指令

以下是用于 Flexbox 容器的 API 或指令，

• fxlayout
• fxlayout gap
• fxLayoutAlign
• fxlayout

fxLayout 是一个用于定义 HTML 元素布局的指令。也就是说，它决定了 flexbox 容器内子元素的流动方向，并且应应用于父 DOM 元素，即 flexbox 容器。该指令区分大小写，fxLayout 的允许值为 row、column、row-reverse 和 column-reverse。

fxLayoutAlign

fxLayoutAlign 指令定义了 flexbox 父容器内子元素的对齐方式。

语法

示例

fxLayoutGap

fxLayoutGap 是一个用于定义 flexbox 容器内子项之间间隙的指令。

示例

用于 flexbox 子项的 Angular flex 布局指令

以下指令适用于 flexbox 子元素

• fxFlex
• fxFlexOrder
• fxFlexOffset
• fxFlexAlign

fxFlexFill

fxFlex 是什么？

fxFlex 是 Angular Flex Layout 中最有用的 API 之一。它必须在 fxLayout 容器内的子元素上使用。它负责沿布局的主轴调整元素大小。

fxFlexOrder

定义 flexbox 项的顺序，

fxFlexOffset

在父容器的流布局中偏移 flexbox 项。

fxFlexAlign

其作用类似于 fxLayoutAlign，但仅适用于单个 flexbox 项，而不是所有项。

fxFlexFill

最大化布局容器中元素的宽度和高度。

Flex 结合 Align-Self

'flex-align' 只能更改单个元素的对齐方式。

理解“layout-align”的布局

Flex 项按水平行或垂直列排列。

布局方向

我们可以将布局方向定义为容器 { fxLayout: row | row-reverse | column | column-reverse; } row (default): 在 ltr 中从左到右；在 rtl 中从右到左，它有四个可能的值

• 行
• row-reverse
• column
• column-reverse

布局方向（水平）的对齐

我们可以使用布局对齐属性值在水平方向上调整项，它在主轴上定义 fxLayoutAlign="". 这些有七个可能的值，

• 无
• start (default)
• end
• center
• space-around
• space-between
• space-evenly

垂直方向（垂直）的对齐

相同的概念也适用于垂直布局对齐属性。

• 无
• 开始 (start)
• center
• end
• stretch (default)

使用以下代码来垂直和水平对齐布局。

布局方向：row

布局方向（水平）的对齐：start

垂直方向（垂直）的对齐：center

另一个例子

布局方向：column

布局方向（水平）的对齐：end

垂直方向（垂直）的对齐：center

另一个例子

布局方向：column

布局方向（水平）的对齐：end

垂直方向（垂直）的对齐：center

响应式布局方向

Angular Flex-Layout 响应式 API

Angular Flex-Layout 的安装

使用以下命令在您的项目中启用 Angular Flex 布局。

安装 flex layout 后，我们需要像下面这样在我们的 app.module.ts 文件中导入 flexLayoutModule。

让我们在我们的项目中创建一个名为 card-layout 的组件，

在创建 card-layout 组件后，让我们将下面的示例代码添加到 HTML 模板文件中。

在此示例中，我们在行上添加了卡片，并在同一列中对齐了它们。当我们检查浏览器的响应性时，由于 fxLayout.md 和 fxLayout.lt-md 的 fxFlex.md 和 fxFlex.lt-md 的响应式断点，它会自动调整卡片布局。

card-layout.component.html