css实现六边形及其它灵活布局

制作六边形网格

首先，创建我们的六边形。这个任务使用 clip-path 实现起来相当容易。另外推荐一个很棒的剪辑路径的在线生成器Clippy。裁剪示意图一:

 <div class="main"><div class="container"><div></div><div></div><div></div><!--更多的元素. --> </div></div> 

css设置为：

 .main {display: flex;--s: 100px;/* size*/--m: 4px; /* margin */}.container {font-size: 0; /* 禁用内联块元素之间的空白 */}.container div {width: var(--s);margin: var(--m);height: calc(var(--s) * 1.1547);display: inline-block;font-size: initial;clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);} 

到目前为止并没有什么复杂的处理逻辑，我们设置了一个容器container来存放inline-block的六边形元素，另外我们需要处理因为inline-block而导致的空白间隙问题（我们使用font-size: 0;进行修复）：

<img src=“https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ab71f73de2d4087afde739f7c4de970~tplv-k3u1fbpfcp-zoom-in-crop-mark