如何用CSS制作响应式3-4-3/2-3-2蜂窝六边形结构

单纯用flex-wrap确实搞不定蜂窝的错位效果，得结合行级偏移和媒体查询来实现，给你一套可直接用的方案：

核心思路 #

1. 外层用flex容器垂直排列各行，每行单独做容器控制六边形数量；
2. 用clip-path快速生成正六边形（比边框法更简洁易维护）；
3. 给奇数行添加水平偏移，偏移量为六边形宽度+间距的一半，实现蜂窝错位效果；
4. 媒体查询触发时，修改每行的六边形数量和偏移量，切换到2-3-2布局。

代码实现 #

HTML结构

<div class="honeycomb-container">
  <!-- 第一行（3个） -->
  <div class="honeycomb-row row-offset">
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
  </div>
  <!-- 第二行（4个） -->
  <div class="honeycomb-row">
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
  </div>
  <!-- 第三行（3个） -->
  <div class="honeycomb-row row-offset">
    <div class="hexagon"></div>
    <div class="hexagon"></div>
    <div class="hexagon"></div>
  </div>
</div>

CSS样式

/* 基础六边形样式 */
.hexagon {
  width: 100px;
  height: 115px; /* 正六边形固定比例：高度=宽度×1.1547 */
  margin: 5px;
  background: #4CAF50;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background 0.3s;
}

.hexagon:hover {
  background: #45a049;
}

/* 外层容器：垂直排列各行 */
.honeycomb-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* 行间距抵消六边形上下重叠部分 */
  padding: 20px;
}

/* 行容器：水平排列六边形 */
.honeycomb-row {
  display: flex;
  gap: 10px; /* 六边形之间的水平间距 */
}

/* 奇数行偏移，实现蜂窝错位 */
.row-offset {
  margin-left: 55px; /* 偏移量=(六边形宽度+间距)/2 = (100+10)/2=55px */
}

/* 响应式切换到2-3-2布局 */
@media (max-width: 768px) {
  /* 可选：缩小六边形适配小屏幕 */
  .hexagon {
    width: 80px;
    height: 92px;
  }

  /* 调整小屏幕下的行偏移量 */
  .row-offset {
    margin-left: 45px; /* (80+10)/2=45px */
  }

  /* 隐藏多余的六边形，切换为2-3-2结构 */
  .honeycomb-row:nth-child(1) .hexagon:nth-child(3),
  .honeycomb-row:nth-child(3) .hexagon:nth-child(3),
  .honeycomb-row:nth-child(2) .hexagon:nth-child(4) {
    display: none;
  }
}

关键细节说明 #

• 正六边形的宽高比是固定值，保证形状规整；
• 行偏移量的计算要和六边形尺寸、间距匹配，否则错位会不齐；
• 媒体查询的断点（768px）可根据你的需求调整，若需要动态生成六边形，也可以用JS控制DOM元素的显示隐藏；
• 如果要更灵活的动态布局，也可以用CSS Grid实现，核心逻辑还是给奇数行设置列偏移（比如grid-column-start: 2）。

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