Angular Flex Layout 入门

Photo by Tyler Lastovich on Unsplash

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

使用 Angular Flex Layout 可以减少 Flex 布局相关的 CSS 代码。

当然,使用的时候你最好补充一点关于 Flex 布局的基本知识。

快速开始

使用 npm 安装模块

npm i -s @angular/flex-layout @angular/cdk

在需要使用 Flex Layout 的模块中导入。

特别是项目中有多个模块的需要特别注意。

import { FlexLayoutModule } from '@angular/flex-layout';
 ...
 @NgModule({
    ...
    imports: [ FlexLayoutModule ],
    ...
});

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

<div fxLayout="row" fxLayoutAlign="space-between">
</div>

入门

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

结合 Static API 文档 基本可以完成基本的样式布局。

此 Demo 也可以辅助你理解 Flex 布局的原生属性。

参考链接

Static API Overview

相关阅读

Angular Flex Layout 进阶

发表评论

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