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

本文介绍: 为每个六边形元素设置为`inline–block`) 至此，我们将得到这样的效果) `shap e–out s ide`最有意思的是它可以使用渐变，但是什么样的渐变才适用于我们的六边形布局呢？假如我们有 10 行六边形，我们只需要在每偶数行移动一个`均值`。从不同的角度来看，我们需要每隔一行移动一次，所以我们需要一重复渐变。`shap e–outside`大概设置为。

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

 &lt;div class="main"&gt;<div class="container"&gt;<div&gt;</div&gt;<div&gt;</div&gt;<div&gt;</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;进行修复）：

 .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%);margin-bottom: calc(var(--m) - var(--s) * 0.2886); /* 设置底部边距 */}

…结果变成： <img src=“https://p9-juejin.b yte img.com/tos–cn-i-k3u1fbpfcp/a05659e35f23495e b bdedf2dc51ced73~tplv-k3u1fbpfcp-zoom–in–crop-mark:4536:0:0:0.image?) 现在我们面临的问题是如何移动第二行元素以获得完美的六边形网格。我们已经将元素压缩到行彼此垂直重叠的程度，我们还需要的是将元素每隔一行向右推，以便六边形交错而不是重叠。这时候就是float发挥shape-outside作用的时刻了” style=“margin: auto” />

你有没有想过为什么我们要设置一个display: flex的.main元素来包裹我们的容器.container？该操作也是 div 布局技巧的一部分：

弹性项目的例子:
<div style="display:flex">


<div id="item1">block</div>


<div id="item2" style="float: left;">float</div>


anonymous item 3


<span>
item 4

<q style="display: block" id=not-an-item>item 4</q>
item 4
</span>
</div> 
上述代码会生成：

请注意，元素间的空白消失了：它不会成为自己的弹性项目，即使元素间文本 _确实_被包裹在匿名弹性项目中。

还要注意匿名项的框是不可设置样式的，因为没有要为其分配样式规则的元素。然而，它的内容将从 flex 容器继承样式（例如字体设置）。

这里我们使用.container::before伪类元素创建一个浮动元素，它占据了网格左侧的所有高度，并且宽度等于半个六边形（加上边距）：

 .container::before { content: ""; width: calc(var(--s)/2 + var(--m)); float: left; height: 100%; }

注意定义中的“内联内容”。这恰恰解释了为什么六边形需要的是inline-block元素。但要了解我们需要什么样的形状，让我们放大图案：

 shape-outside: repeating-linear-gradient(#0000 0 A, #000 0 B); /* #0000 是 transparent 的一种写法 */

现在我们需要定义A、B的值。因为六边形网格布局，我们需要重复每两行，因此B的值两行的高度，两行的高度等于两个六边形的高度（包括它们的边距）减去重叠的两倍(2*Height + 4*M - 2*Height*25% = 1.5*Height + 4*M )，使用csscalc()并将该数值存在 css 变量f中：

 .main {display:flex;--s: 100px;/* size*/--m: 4px;/* margin */--f: calc(1.732 * var(--s) + 4 * var(--m)- 1px);}

A（上图中蓝色箭头定义的）的值需要至少等于一个六边形的大小，或更大一点。为了将第二行推到右边，我们需要一些不透明颜色的像素，所以A可以简单地等于B - Xpx，其中X是一个小值，我们最终得到shape-outside的值如下：

 shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),#000 0 var(--f));

 .main {display:flex;--s: 100px;/* size*/--m: 4px;/* margin */--f: calc(var(--s) * 1.732 + 4 * var(--m) - 1px); }.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%);margin-bottom: calc(var(--m) - var(--s) * 0.2885);}.container::before {content: "";width: calc(var(--s) / 2 + var(--m));float: left;height: 120%; shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000 0 var(--f));}

至此，六边形网格布局基本完成。您可能已经注意到我在变量f中添加了-1px。由于我们正在处理涉及小数的计算，四舍五入可能会给我们带来不好的结果。为了避免这种情况，我们添加或删除了几个像素。出于类似的原因，我们也使用120%而不是100%浮动元素的高度。这些值没有特定的逻辑；我们只是简单地调整它们以确保覆盖大多数情况而不会错位我们的形状。