如何对齐六边形类几何形状？Flex与绝对定位实现未达预期问题求解

我正尝试对齐目标参考图所示的六边形类几何形状。
![目标效果图]
此前尝试使用position absolute属性未取得成功，已编写的测试代码如下：

<div className={style.container}>
  <div className={style.hexagons}>
    <div>
      <Hexagon />
    </div>
    <Hexagon />
    <div className={style.teste}>
      <Hexagon />
    </div>
  </div>
</div>

CSS代码如下：

.container {
  height: 800px;
}

.hexagons {
  display: flex;
  position: absolute;
  width: 100%;
}

.teste {
  margin-top: 50px;
}

当前页面实际渲染效果不符合预期，希望得到可行的实现思路或相关指导。
![实际效果图]

问题与修正方案 #

1. 定位逻辑错误：给.hexagons设置position: absolute但父容器.container未添加position: relative，导致元素脱离当前文档流，相对于视口定位，位置完全偏移。
2. flex布局计算异常：三个六边形的父结构不统一（两个被div包裹、一个直接作为flex子元素），且.hexagons设置了width: 100%，flex默认拉伸子元素，导致margin-top表现不符合预期。
3. 偏移量硬编码问题：写死50px的上边距未结合六边形实际可视高度计算，尺寸变动就会错位。

修正代码 #

调整后的结构

统一给每个六边形套相同父容器，消除布局计算差异：

<div className={style.container}>
  <div className={style.hexagons}>
    <div className={style.hexItem}>
      <Hexagon />
    </div>
    <div className={style.hexItem}>
      <Hexagon />
    </div>
    <div className={style.hexItemOffset}>
      <Hexagon />
    </div>
  </div>
</div>

调整后的CSS

.container {
  height: 800px;
  position: relative; /* 不需要绝对定位可直接删除该行 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.hexagons {
  display: flex;
  align-items: flex-start;
  width: fit-content; /* 取消100%宽度，按内容自动收缩 */
  gap: 1.2rem; /* 按需调整六边形水平间距 */
  position: relative; /* 不需要绝对定位可直接删除该行 */
}

.hexItemOffset {
  /* 替换为单个六边形实际可视高度的1/2，例如可视高100px则写50px */
  margin-top: calc(100px / 2);
}

批量蜂窝排列简化方案 #

如果需要排布多个六边形组成蜂窝阵列，使用CSS Grid无需手动逐个设置偏移：

.hexGrid {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* 替换为六边形实际宽度 */
  grid-auto-rows: calc(100px * 0.75); /* 正六边形蜂窝排列的标准行高比例 */
  gap: 1rem;
  grid-auto-flow: dense;
}

若六边形通过clip-path绘制，注意布局占位仍按矩形计算，偏移量需结合可视边的高度调整，不要直接用占位盒高度硬算。

内容的提问来源于stack exchange，提问作者Pedro