什么是basscss-grid
basscss-grid是一个基于basscss的网格系统,它提供了很多实用的工具类,使得我们可以更加方便快速地构建基于网格布局的网页。
安装
安装basscss-grid非常简单,只需要通过npm安装即可:
--- ------- ------------
使用
在安装完basscss-grid后,我们就可以在我们的项目中引用该包提供的样式和工具类。
CSS样式
basscss-grid主要提供了三个样式文件:basscss-grid.css、basscss-grid.css.map和basscss-grid.min.css,其中basscss-grid.min.css是压缩后的版本。
我们可以通过在HTML中导入CSS样式的方式来使用该包提供的样式,如下所示:
----- ---------------- --------------- --------------------------------------------------
工具类
除了提供CSS样式外,basscss-grid还提供了一系列的工具类,方便我们进行布局。下面是一份基本的工具类列表:
- .clearfix:清除浮动
- .mxn1:去除行之间的边距(Margin)
- .flex:Flex布局
- .flex-auto:等比分配Flex子元素的宽度
- .flex-none:Flex子元素的宽度固定
- .flex-wrap:Flex子元素可以换行
- .flex-column:Flex子元素纵向排列
- .justify-start:起点对齐
- .justify-center:居中对齐
- .justify-end:终点对齐
- .align-stretch:拉伸对齐
- .align-start:顶部对齐
- .align-center:中部对齐
- .align-end:底部对齐
- .grid:网格布局
- .col:定义网格布局中的列
- .col-2:占2格
- .col-3:占3格
- ...
- .col-right:列向右对齐
- .col-left:列向左对齐
- .col-top:列向上对齐
- .col-bottom:列向下对齐
- .col-middle:列垂直居中
- .col-center:列水平居中
下面是一个简单的例子,展示了如何使用basscss-grid实现一个基本的网格布局:
---- ------------- ---- ---------- ----- ---------- ---- ----------------------------------------- ------- ------ ---- ---------- ----- ------------ -------------- ------------ ------ ------
在上面的例子中,我们先创建了一个grid容器,表示整个网格布局,然后在其中创建了两个列,第一个列占据了6个格子,第二个列也占据了6个格子,并且向左对齐并垂直居中。
总结
basscss-grid提供了很多有用的工具类,可以让我们快速地搭建基于网格布局的网页。虽然比较基础,但它的实用性很高,非常值得学习和使用。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5eedd617bb4e78292a6fb8ad