什么是 wicked-grid?
wicked-grid 是一个面向前端开发的网格系统，基于 flexbox 实现，在响应式设计中具有很大的优势。wicked-grid 可以帮助开发者快速创建出各类网站布局，达到适应不同屏幕大小的效果，节约开发时间。
安装及使用
安装
wicked-grid 可以通过 npm 安装，使用如下命令：
- --- ------- ---------- -----------
使用
- 引入 wicked-grid：
----- ------------------------------------------------- ------------------
- 为元素添加 class 值：
添加 wg 作为 .wg 的前缀，后续跟数字代表占用的列数，例如: .wg-12,wg-10等。
---- --------------------- -- ------- ---- ------------------ - ------- ---- ------------------ - -------
深入理解
wicked-grid 为每个元素提供了五个 class 值，分别是 .wg, .wg-pull, .wg-push, .wg-tighten 和 .wg-loosen。
.wg
.wg 是 wicked-grid 最基本的 class，它告诉网格系统这个元素应该按照网格系统的规则来呈现。
---- --------------------- -- -------
.wg-pull
.wg-pull 将元素向左移动n个单位格子（n 为所分的列数），可以用于调整网格中个别元素的位置。
---- ----------- ---------------- - ------- - -------
.wg-push
.wg-push 将元素向右移动n个单位格子（n 为所分的列数），可以用于调整网格中个别元素的位置。
---- ----------- ---------------- - ------- - -------
.wg-tighten
.wg-tighten 用于紧缩元素，当一个网格中的两个元素左右各占据了一半空间时，我们可以使用 .wg-tighten 将两个元素挤在一起。
---- ----------- ----------------- - ------------- ---- ----------- ----------------- - -------------
.wg-loosen
.wg-loosen 用于进行元素之间的留白，当你需要让一个网格中的两个元素之间留出空白时，你可以在其中一个元素上使用 .wg-loosen 。
---- ----------- ---------------- - ------------------ ---- ------------------ - -------
示例代码
--------- -----
------
------
----- ----------------
------------------ ------------
----- ------------------------------------------------- ---------------- --
-------
---- -
----------- -----
------ -----
-------- -----
----------- -------
-
---- --- -
-------- ------
------- -----
------ -----
-
--------
-------
------
---- ------------ ------------ -- -------
---- ----------- --- ---------------- - ------- - -------
---- ----------- --- ---------------- - ------- - -------
---- ----------- --- ----------------- - -------------
---- ----------- --- ----------------- - -------------
---- ----------- --- ---------------- - ------------------
---- ----------- --------- ------------------------------------------------------------------------------------------------------------------------ --------
-------
-------总结
wicked-grid 作为运用 flexbox 的网格系统，可以帮助我们更快速、更好地完成响应式布局，减少了在写响应式页面时的开发时间。使用它可以很方便地完成一些细节性的操作。欢迎大家在实际开发中尝试使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006710a8dd3466f61ffe032