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