介绍
ngx-layouts 是一个 Angular 的 npm 包，它提供了一些强大的功能，可以帮助开发者实现各种不同类型的布局。它包含了很多特性，例如：弹性布局（flexbox）、网格布局（grid）、CSS 媒体查询、CSS 等比缩放等等。
本篇文章将会介绍如何安装、使用 ngx-layouts 这个 npm 包，并且针对其中的一些重要功能进行详细讲解和示例。
安装
对于新手开发者和经验丰富的开发者而言，安装 ngx-layouts 都十分简单，只需要通过 npm 安装即可：
npm install ngx-layouts --save
这个安装命令会将 ngx-layouts 包及它所需的依赖项下载到你的项目中。
弹性布局
ngx-layouts 的弹性布局（flexbox）特性是它最强大的功能之一。它支持的属性有：fxLayout、fxLayoutAlign、fxLayoutGap、fxLayoutWrap 等。
fxLayout
fxLayout 属性定义了一个元素应使用的弹性布局方向（row、column、row-reverse、column-reverse）。如果你正在编写一些响应式网站，那么你可能会在不同的设备上采用不同的布局方向。
以下是一些示例代码：
<div fxLayout="row"></div> <div fxLayout="column"></div> <div fxLayout="row-reverse"></div> <div fxLayout="column-reverse"></div>
fxLayoutAlign
fxLayoutAlign 属性定义了一个元素在其容器中的弹性布局对齐方式（start、end、center、baseline、stretch、space-between、space-around）。如果你的元素不是 100% 宽度，那么你可以使用 fxLayoutAlign 属性将它们沿着您所需的方向对齐。
以下是一些示例代码：
<div fxLayoutAlign="start"></div> <div fxLayoutAlign="center"></div> <div fxLayoutAlign="end"></div> <div fxLayoutAlign="space-between"></div> <div fxLayoutAlign="space-around"></div> <div fxLayoutAlign="stretch"></div>
fxLayoutGap
fxLayoutGap 属性定义了元素之间的间隙。默认是 10px，但是你可以设置任意大小的空隙。
以下是一些示例代码：
<div fxLayoutGap="10px"></div> <div fxLayoutGap="20px"></div> <div fxLayoutGap="30px"></div>
fxLayoutWrap
fxLayoutWrap 属性定义了一个元素是否应该换行。如果你的元素在移动端上很长，并且你需要将其截成多个列，那么使用 fxLayoutWrap 属性是很有用的。
以下是一些示例代码：
<div fxLayout="row" fxLayoutWrap></div> <div fxLayout="column" fxLayoutWrap></div>
网格布局
Grid 布局是一个基于网格的布局系统，它是 CSS3 的一部分。它支持的属性有：fxLayout、fxLayoutAlign、fxLayoutGap、fxLayoutWrap 等。
以下是一些示例代码：
<div fxLayout="grid" fxLayoutAlign="start"></div> <div fxLayout="grid" fxLayoutAlign="center"></div> <div fxLayout="grid" fxLayoutAlign="end"></div> <div fxLayout="grid" fxLayoutAlign="space-between"></div> <div fxLayout="grid" fxLayoutAlign="space-around"></div> <div fxLayout="grid" fxLayoutAlign="stretch"></div>
CSS 媒体查询
CSS 媒体查询允许我们检测用户使用的设备以及浏览器的屏幕大小。ngx-layouts 支持用于媒体查询的 fxShow 属性。
以下是一些示例代码：
<div fxShow fxHide.gt-sm></div>
这个示例中，我们设置元素在大屏幕（gt-sm）上显示，否则隐藏。
CSS 等比缩放
等比缩放是一种将比例应用到元素上的简单方法。它支持的属性有：margin-top、margin-bottom、margin-left、margin-right、padding-top、padding-bottom、padding-left、padding-right、height、width。
以下是一些示例代码：
<div fxFlex="5"></div> <div fxFlex="10"></div> <div fxFlex="20"></div>
我们可以使用 flex 属性来配置并控制这些元素的大小。
结论
ngx-layouts 提供了很多强大的功能，可以轻松实现各种不同类型的布局，并且非常适合用于响应式网站。得益于它方便简单的使用，可以大幅度提高前端开发工作效率。如果你还没有尝试过 ngx-layouts，那么我非常推荐你使用它，相信它能够帮助你实现出更加优秀的网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551df81e8991b448cf4c3