[聚合文章] Hexi Flexi Grid Layout

在《Sass绘制多边形》和《 使用Sass制作菱形网格布局 》文章中，我们了解了怎么通过Sass来实现多边形和菱形相关的网格布局，但这些在实际的布局中使用场景并不常见。最近 @vmcreative 的 Hexi 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 文件。如果你引用的是 SassMagic ，你只需要将 _sassMagic.scss 文件引入到你的项目。当然如果你没有使用SassMagic项目，你可以根据你自己的项目结构，把Hexi Flexi Grid对应的SCSS文件引入到你的项目中。比如 hex-style.scss ：

@import 'path/to/hex-style.scss';

在 hex-style （或者说SassMagic中的 _hexi-flexi-grid.scss ）的内部是一个模块化的代码块（其实也相当于一个简单的CSS或者说SCSS模块），它包含了六边形的网格设置。在 id 选择器中设置为代码块的顶部，用来匹配顶级的父 div 的 id 。比如前在HTML结构中的 #myHexGrid 。

在 #myHexGrid 这个唯一的 id 中，配置 @mixins 所在要的参数：

#myHexGrid {

    $gridWidth:   40em;       // 'auto',(px,pt,r/em,vw/h)
    $gridHeight:  auto;       // 'auto',(px,pt,r/em,vw/h)
    $columnCount: 6;          // 'auto',(number)
    $rowCount:    4;          // 'auto',(number)
    $hexCount:    auto;       // 'auto',(number)
    $hexLayout:   row;        // 'row','column','strict'
    $gridOrient:  vertical;   // 'vertical','horizontal'
    $crop:        none;       // 'none','crop'
    $cropFactor:  1;          // (number)
    $hexContent:  auto;       // 'auto','center'
    $hexSize:     auto;       // 'auto',(px,pt,r/em,vw/h)
    $hexMargin:   0.5em;      // (px,pt,r/em,vw/h)
    $hexShape:    hexagon;    // 'hexagon','circle'
    $hexColor:    #48a999;    // hexcode,rgb/a,named
    $images:      none;

    ...
}

上面的参数对应了 @mixin hexContainer() 中的参数。但这只是所需变量的设置，如果真正要实现一个六边形的网格布局之外，除了上述参数的配置之外，还需要：

#myHexGrid {
    $gridWidth:   40em;       // 'auto',(px,pt,r/em,vw/h)
    $gridHeight:  auto;       // 'auto',(px,pt,r/em,vw/h)
    $columnCount: 6;          // 'auto',(number)
    $rowCount:    4;          // 'auto',(number)
    $hexCount:    auto;       // 'auto',(number)
    $hexLayout:   row;        // 'row','column','strict'
    $gridOrient:  vertical;   // 'vertical','horizontal'
    $crop:        none;       // 'none','crop'
    $cropFactor:  1;          // (number)
    $hexContent:  auto;       // 'auto','center'
    $hexSize:     auto;       // 'auto',(px,pt,r/em,vw/h)
    $hexMargin:   0.5em;      // (px,pt,r/em,vw/h)
    $hexShape:    hexagon;    // 'hexagon','circle'
    $hexColor:    #48a999;    // hexcode,rgb/a,named
    $images:      none;

    @include hexWrapper(
        $gridWidth,
        $gridHeight,
        $gridOrient,
        $rowCount,
        $columnCount);

    .hexCrop {
        @include hexCrop($crop,$cropFactor)
    }

    .hexContainer {
        @include hexContainer(
        $gridWidth,
        $gridHeight,
        $gridOrient,
        $columnCount, 
        $images,
        $rowCount,
        $hexLayout,
        $hexContent,
        $hexShape,
        $hexColor,
        $hexMargin,
        $hexCount,
        $hexSize
        )
    }
}

如此一来，你就能看到上面Demo中展示的 6x4 的一个六边形的网格布局。

定制

上一个Demo我们看到的 6x4 的六边形网格布局是一个纯色的网格布局。如果我们希望六边形的网格颜色并全部一样的时候，我们还可以为六边形的风格做一些定制。

六边形的网格样式的定制主要由 @mixins hex-style 代码块来完成，具体的SCSS代码在这里不做过多展示。

Hexi Flexi Grid为六边形网格中的每一个单独的列、行和单元格分配唯一的类名：

• c-[n] ：以列 [n] 中的每个单元格为目标
• r-[n] ：以行 [n] 中的每个单元格为目标
• c-[n1].r-[n2] ：单元格位于列 [n1] 和行 [n2]

如果我们需要给不同的行和列的单元格设置不同的背景色或特殊的样式，我样可以这样做：

#myHexGrid {

    // ...

    margin: 2em; // 网格的外边距为`2em`

    // 列一的单元格背景色为`red`
    .c-1 {
        background-color: red;
    }

    // 行2的单元格将缩小80%
    .r-2 {
        transform: scale(0.8);
    }

    // 列3和行1的单元格，透明度为50%
    .c-3.r-1 {
        opacity:0.5;
    }

    // ...
}

通过这样的方式，我们可以定制一些不同的六边形网格布局的效果，比如：

上面的示例，我们看到的都是纯色的六边形，以及后面两行做了一些个性化的定制效果。除此之外，还可以在 $images 的配置中，设置图片，比如：

#myHexGrid {

    // ...

    $images:
        'path/to/image-1.jpg'
        'path/to/image-2.jpg'
        'path/to/image-3.jpg'
        'path/to/image-4.jpg'
        'path/to/image-5.jpg'
        'path/to/image-6.jpg'
    ;

    // ...

}

如此一来，看到的效果，就如文章中最早提供的Demo效果。

上面的所有Demo效果，并没有向大家展示任何一行有关于SCSS的代码，也就是 _hexi-flexi-grid.scss 的代码。如果你对源码感兴趣的话，可以在 SassMagic 的 _hexi-flexi-grid.scss 文件中阅读源码，除此之外，你也可以在 @vmcreative 的 Hex Flexi Grid 仓库中阅读源码。 SassMagic 中除了Hexi Flexi Grid的的SCSS代码之外，还包含了其了很多有意思的 @function 和 @mixins 。如果你感兴趣的话，可以关注这个仓库。

网格配置

虽然我们没有花大篇幅的时间来介绍 _hexi-flexi-grid.scss 中的源码，但我们有必要了解其中的的参数配置，只有了解这些配置，才能更好的使用六边形的网格布局。

$gridWidth

设置六边形网格的宽度。

值	描述
auto	网格宽度将匹配 $gridHeight 的比例。当设置为 auto 时， $gridHeight 必须显式设置
<length>	显式的设置网格的高度。注意，不支持百分比宽度

$gridHeight

设置六边形网格的高度。

值	描述
auto	网格的高度将匹配 $gridWidth 的比例。当设置为 auto 时， $gridWidth 必须显式设置
<length>	显示设置网格的高度。注意，不支持百分比高度

$columnCount

设置六边形网格的列数。

值	描述
auto	列的数量将按行的单元格数来进行匹配。 当设置为 auto 时， 必须显式地设置 $rowCount 和 $hexCount
number	显式的设置列的数量值

rowCount

设置六边形网格的行数。

值	描述
auto	单元格的数量将匹配列数乘以行数。 当设置为 auto 时，必须显式设置 $rowCount 和 $columnCount
number	显式的设置单元格数量值

$hexLayout

设置单元格填充网格的方向。

值	描述
row	单元格将从网格的左上角开始填充，并将其横向填充，当一行满了之后将再填充到下一行
column	单元格将从网格的左上角开始填充，并将其纵向填充，当一列满了之后将再填充到下一列

$gridOrient

设置网格单元格对齐的方向。

值	描述
vertical	列方向对齐，行将偏移一个半单元格
horizontal	行方向对齐，先将偏移一个半单元格

$crop

设置网格是否为矩形裁剪。

值	描述
none	网格将不会被裁剪
crop	网格将会根据 $cropFactor 因子进行缩放，并且 overflow:hidden

$cropFactor

当网格被裁剪时，设置网格的缩放。

值	描述
number	显示的设置网格的缩放因子。 1.2 的值相当于 120%

$hexContent

设置单元格的内容。

值	描述
auto	单元格内容将延伸到整个单元格的大小，其大小值不包含 $hexMargin 的值
center	单元格内容在单元格中居中，并与 $hexSize 的值相匹配。其大小包含 $hexMargin 的值

$hexSize

设置单元格的大小。

值	描述
auto	单元格将占满 100% 的可用空间
number	显式设置单元格大小。注意：不支持百分比的值

$hexMargin

设置单元格外边距。

值	描述
number	显式设置单元格外边距。注意：此值不支持百分比的值

$hexShape

设置单元格的形状。

值	描述
hexagon	单元格为六边形
circle	单元格为圆形

$hexColor

设置单元格的背景颜色。

值	描述
color	设置单元格背景色，接受十六进制颜色、 rgb 和 rgba 以及颜色关键词

$images

设置六边形单元格的背景图像。文件将按照 $gridLayout 指定的顺序添加到网格中。如果 $images 的值为 none ，将表示单元格的背景为 url(none) ，不会有任何背景图像填充到单元格。

总结

通过Sass的特性，创建了一个灵活具有弹性的六边形的网格布局。在整篇文章中，并没有剖析六边形网格布局的Sass代码，只是基于 _hexi_flexi_grid.scss 的 @function 和 @mixins 能让我们快速的实现 m x n 的六边形网格布局。文章的示例，通过几行简单的代码就可以快速的实现六边形的网格布局。当然如果你对Sass的代码感兴趣的话，可以阅读其 源码 。

除了六边形的网格布局之外， SassMagic 还提供了其他一些相关的 @function 和 @mixins 。如果你的项目是通过Sass来完成，建议你引用这个库，能帮助你快速实现一些常用的功能模块。如果你对改库感兴趣，欢迎 Fork 或者点赞。当然，如果你有相关的Mixins，欢迎给我们提 Pull Requests 。或者你发现其中有误之处，也可以给我们提 Issues 。希望更多的开发者参与 SassMagic 的构建和维护。

最后要特别感谢 @Vincent Martin 给我们提供了一个这么 优秀的方案 ，能帮助我们快速的完成六边形的网格布局。

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