介绍
Flexbox-Grid 是一款轻量级、强大的响应式网格系统。不过它也有一个问题：当将一列 clearfix 删除时，其比预期更小，不太符合设计方案。flexbox-grid-fix2 正是为了修复这个问题而生的 npm 包。
安装
在你的项目目录下执行以下命令即可安装 flexbox-grid-fix2：
npm install flexbox-grid-fix2 --save
使用
引入样式
在你的样式文件中，导入 flexbox-grid-fix2：
@import 'flexbox-grid-fix2';
使用网格系统
flexbox-grid-fix2 中的网格系统与 Flexbox-Grid 基本相同，不同之处在于增加了对 .row 的 margin-bottom 补偿。在你的 HTML 文件中，按照 Flexbox-Grid 的文档使用即可。
<div class="container"> <div class="row"> </div> </div>
单个组件样式覆盖
想要覆盖单个组件的样式，只需将样式重载到该组件上：
.my-custom-component .row {
margin-bottom: 20px;
}更多使用详情请参考 官方文档.
示例代码
下面的代码演示了如何在网格中使用 flexbox-grid-fix2：
-- -------------------- ---- -------
---- ------------------
---- ------------
---- -----------------
---------------------
--------------- -------------------------------- -------- ------------------------------------- ------------- --- ------
------
---- -----------------
------ ----------------------
--------------------- ----------------------
-------------- ------- ----------------- -------------------
-------------- ----------------------
------------------ ---------------------------------
--------------
------------------ ---------------------
------- ---------------
------------
-------------------------
------
------
------结尾
以上就是 flexbox-grid-fix2 的使用教程。希望本篇文章能够帮助你解决网格系统中遇到的问题，并有效地应用 flexbox-grid-fix2。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bda81e8991b448d97db