使用CSS创建灵活的空间填充蜂窝

Question

我正在尝试为我正在研究的网络创建某种热图.我想使用一个蜂箱,因为它看起来很花哨,给了我很大的空间利用率.

如果找到这个网站,我想出如何使用纯CSS的六边形.但它依赖于严重的行和偏移量.我的整个UI都是KnockoutJS驱动的,并且在任何给定时间都在网络上拥有动态数量的PC.(主要是码头集装箱上升或下降).

群集可以在1到n + 1个节点之间变化.

我查看了这个网站:CSS Hexagon 并找到了几种管理六边形的解决方案,但它们的动态使用都非常有限.

这是预期的代码:

 <div class="panel-body>
      {{noescape "<!-- ko foreach: { data: vm.dash().nodes, as: 'node' } -->" }}
          <span class="flex-span" data-bind="attr: { 'id': node.id }, css: { up: node.Status == 2, down: node.Status != 2 }">&#x2B22;</span>
      {{noescape "<!-- /ko -->"}}
 </div>

基于此,它将为六边形提供指示向上/向下的颜色

我已经用我的flexbox想法掀起了一个非淘汰的小提琴,但是我并没有真正理解flexbox,所以它显然不起作用:小提琴

#container {
  max-width:400px;
  max-height:400px;
}

.hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
    flex-shrink: 1;
    flex-grow:1;
    flex-basis: 130px;
}

.hex {
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: #6C6;
    position: relative;
    float:left;
    margin-bottom:30px;
    flex-shrink: 1;
    flex-grow:1;
    flex-basis: 130px;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    flex-shrink: 1;
    flex-grow:1;
    flex-basis: 130px;
}

<div id="container">
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
</div>

我遇到的问题是:

1. 如何动态缩放这些div而不管数量,并占用最大空间.
2. 如何使用纯CSS解决方案确保所有偶数"行"都偏移半个六边形.

!更新!!

所以我添加了预定行的概念:小提琴我仍然在寻找一种方法来使行偏移取决于".hex"类的宽度.并具有元素数量的十六进制类比例.但我认为网格本身现在看起来非常好.

Answer 1

因此，如果每行需要 3 个六边形，则 :nth-child 可以帮助每 2 行设置一次边距。

要调整元素的大小，您可以使用百分比，但必须使用无边框的伪值，而是使用背景和旋转。

例子：

#container {
  max-width: 400px;
  max-height: 400px;
  border: solid;padding:1px;
}
/* demo*/
#container:hover {

  max-width: 600px;
  max-height: 600px;
 }/* */
.hex {
  margin-top: 8%;
  width: 28%;
  padding: 8% 0;
  background-color: #6C6;
  position: relative;
  margin-bottom: 3px;
  margin-right: 0px;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
.hex:after,
.hex:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0%;
  background: inherit;
  transform: rotate(60deg);
}
.hex:after {
  transform: rotate(-60deg)
}
.hex:nth-child(6n+1) {
  margin-left: 14%;
}

<div id="container">
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
  <div class=hex></div>
</div>