Angular Flex Layout 入门

Photo by Tyler Lastovich on Unsplash

Angular Flex Layout 是官方仓库中一个用于快速实现 Flex 布局的模块。使用

Angular Flex Layout 可以减少 Flex 布局相关的 CSS 代码。当然,使用的时候

你最好补充一点关于 Flex 布局的基本知识。

快速开始

使用 npm 安装 flex-layout 以及 angular cdk

在需要使用 Flex Layout 指令的模块中导入 FlexLayoutModule 。特别是项目

中有多个模块的时候需要特别注意(我在 Angular 模块漫谈中有详细解释)。

然后就可以在组件中使用 Flex Layout 提供的指令。

入门

最快速的入门方法,我认为其实是仓库中提供的 Layout Demos 。交互式的

Playground 会显示出这个样式对应的 Flex Layout 指令。

此 Demo 也可以辅助你理解 Flex 布局的原生属性。再结合 Static API 文档

本可以完成基本的样式布局。

参考链接

Static API Overview

相关阅读

Angular Flex Layout 进阶

发表评论

电子邮件地址不会被公开。 必填项已用*标注