• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

Hexi Flexi Grid Layout

CSS3 web前端中文站 2年前 (2017-12-15) 672次浏览 未收录 0个评论

CSS3 Grid LayoutGridSassSCSSCSS 处理器

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

案例

先上一个 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选择器中设置为代码块的顶部,用来匹配顶级的父divid。比如前在 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 设置单元格背景色,接受十六进制颜色、rgbrgba以及颜色关键词

$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 给我们提供了一个这么优秀的方案,能帮助我们快速的完成六边形的网格布局。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Hexi Flexi Grid Layout
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址