在进行前端开发时，有时候需要对网页进行布局操作。而针对网页布局，CSS 中的弹性盒子布局（flexbox）是个不错的选择。而 flexboxgrid-stylus 是一个基于 flexbox 布局的网格系统，通过使用它，我们可以轻松地在网页上实现网格布局。本文将会介绍如何使用 flexboxgrid-stylus 这个 npm 包，希望读者在本文的指导下能够掌握该套网格系统，并能够将其应用于实际项目开发中。
简介
flexboxgrid-stylus 是一个基于 flexbox 布局的网格系统，其主要特点是：响应式布局、轻量级、易用性高。它提供了一系列的类名，通过使用这些类名，我们可以在网页上实现不同的布局效果。
安装和引入
在使用 flexboxgrid-stylus 之前，我们需要先通过 npm 将它安装到项目中。我们可以通过以下命令来完成：
npm install flexboxgrid-stylus --save
安装完成后，我们需要在样式表中引入该包，示例如下：
@import "../node_modules/flexboxgrid-stylus/flexboxgrid.styl";
使用时，直接在 HTML 文件中添加需要的类名即可：
-- -------------------- ---- -------
---- ------------
---- -----------------
---- -------------------
------
---- -----------------
---- -------------------
------
---- -----------------
---- -------------------
------
------类名说明
flexboxgrid-stylus 提供的类名可以分为两类：网格系统和响应式布局。
网格系统
网格系统主要用于指定网页布局中的行列数量。这里列出一些常用的类名：
| 类名 | 说明 |
|---|---|
.row |
行 |
.col-xs-* |
以屏幕为最小宽度列 |
.col-sm-* |
≥576px |
.col-md-* |
≥768px |
.col-lg-* |
≥992px |
.col-xl-* |
≥1200px |
.col-*-offset-* |
列偏移 |
这里以 .row 和 .col-md-* 为例，来介绍其用法。.row 主要用于定义网页的行，我们可以将需要排列的元素放入 .row 元素中：
<div class="row"> ... </div>
每个 .row 元素中可以包含多个列（col-*），其中 * 表示列的宽度，例如 col-md-6 表示列在屏幕宽度≥768px 时占用 6 个网格，其中可以使用 *-offset-* 用于实现列宽度偏移。例如：
<div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div>
上述代码将会在页面中渲染出如下的网格布局：
响应式布局
flexboxgrid-stylus 的响应式布局主要包括设备、可见/隐藏和排序三种情况。
设备
| 类名 | 说明 |
|---|---|
.visible-*-block |
在特定宽度下可见 |
.hidden-*-block |
在特定宽度下隐藏 |
.visible-*-inline |
在特定宽度下可见（行内） |
.hidden-*-inline |
在特定宽度下隐藏（行内） |
.visible-*-inline-block |
在特定宽度下可见（行内块） |
.hidden-*-inline-block |
在特定宽度下隐藏（行内块） |
可见/隐藏
| 类名 | 说明 |
|---|---|
.visible |
可见行 |
.hidden |
隐藏行 |
.visible-*- |
可见列 |
.hidden-*- |
隐藏列 |
.visible-*-block |
可见块 |
.hidden-*-block |
隐藏块 |
.visible-*-inline |
可见行内 |
.hidden-*-inline |
隐藏行内 |
.visible-*-inline-block |
可见行内块 |
.hidden-*-inline-block |
隐藏行内块 |
排序
包括 .first 和 .last。我们可以将 .first 加入第一个元素，将 .last 加入最后一个元素，从而实现既定排序。
示例代码
最后给出一个完整示例代码，该代码来自于 flexboxgrid-stylus 的 GitHub 仓库。它将 .row 和 .col-*-offset-* 结合起来使用，并且还使用了响应式布局：
-- -------------------- ---- -------
---- ------------
---- ---------------- -------- -----------------
---- -------------------
------
---- ---------------- -------- -----------------
---- -------------------
------
---- ---------------- -------- -----------------
---- -------------------
------
------
---- ------------
---- --------------- ----------
---- -------------------
------
---- --------------- ----------
---- -------------------
------
---- --------------- ------------------------
---- --------------- ----------
---- -------------------
------
---- --------------- ----------
---- -------------------
------
------渲染出来的效果为：
总结
flexboxgrid-stylus 是一个非常好的网格布局库，它提供了丰富的类名，可以帮助我们在前端开发中更加灵活地进行网页布局操作。在实际开发中，我们可以根据实际需求，选择合适的类名进行使用。相信本文介绍的知识点能够帮助读者掌握 flexboxgrid-stylus 的使用方法，从而使开发流程更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff381e8991b448ddbdc