Hexi Flexi Grid Layout

在《Sass绘制多边形》和《使用Sass制作菱形网格布局》文章中,我们了解了怎么通过Sass来实现多边形和菱形相关的网格布局,但这些在实际的布局中使用场景并不常见。最近@vmcreativeHexi Flexi Grid让我感到CSS Grid布局更强大的一面。而这种布局在实际的布局也可以一用。今天把这个仓库中的功能集成了SassMagic中。那么简单的花点时间来看看Hexi Flexi Grid布局。

案例

先上一个Demo的效果:

简单点说就是一个六边形的网格布局。

简介

Hexi Flexi Grid是一个SCSS组件,它是基于CSS的网格布局上创建了一个六边形的网格布局。为这样的布局创建了一个@mixin,而这个@mixin包含了许多可定制的设置,这些设置主要用来控制六边形网格的大小、布局和外观效果等。

特性

Hexi Flexi Grid布局具有一定的特性:

  • 纯CSS实现的六边形网格布局,没有任何的JavaScript代码
  • 灵活的高度、宽度、列和行数
  • 单个单元格、列和行具有独特的样式
  • 支持自动背景图像

支持的浏览器

如果你阅读了Hexi Flexi Grid布局的SCSS源码,你不难发现,其中运用的CSS技术,其关键点通过CSS Grid的布局技术实现布局,然后通过clip-path来实现六边形。从而创建了一个网格形的六边形布局。而这两个属性都是CSS的最新特性。如此一来,就需要面对浏览器的支持性。目前Hexi Flexi Grid的布局能支持的浏览器有:

  • Firefox 56+
  • Chrome 61+
  • Safari 10.1+
  • iOS Safari 10.3+
  • Android Chrome 62+
  • IE11或Edge

开始

至于Hexi Flexi Grid 怎么实现,估计很多同学并不太关注,而关注的是怎么使用。那么接下来,我们来看看怎么使用Hexi Flexi Grid。

先来上一个简单的示例,创建一个6x4的多边形网格,如下所示:

那么,问题来了,这样的效果怎么实现。下面的内容简单的介绍一下如何实现。

HTML

上面的示例,我们创建了一个6x4的六边形网格布局,对于任保一个布局,都离不开HTML的布局。针对上面的布局,我们的HTML的结构嵌套,如下所示,不过有一个唯一的id,当然,我们不一定要使用唯一的id,咱们可以使用class之类的。这个根据自己的需求来定,咱们先来看看最基本的六边形网格布局的HTML结构:

<div id="myHexGrid">
    <div class="hexCrop">
        <div class="hexContainer">
            <div class="hex"></div>
            <!-- 中间省略24个`div.hex`的标签 -->
            <div class="hex"></div>
        </div>
    </div>
</div>

.hexContainer容器内包含了一些div.hex的元素,这些元素等于网格中六边形的网格数目,在这个示例中,是24个。

SCSS

根据你自己的项目需求,引入_hexi-flexi-grid.scss文件。如果你引用的是

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/sass/hexi-flexi-grid.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部