如何用CSS实现居中固定的蜂窝网格（类似background-size:cover效果）

要实现9个红色蜂窝始终居中，黑色蜂窝随屏幕宽度缩小而溢出屏幕的效果，核心是禁止蜂窝容器换行，并通过外层容器的溢出隐藏和居中对齐，模拟object-fit: cover的裁剪效果。以下是修改后的代码：

CSS 代码 #

.main {
  width: 100vw;
  overflow: hidden; /* 超出屏幕的部分裁剪 */
  display: flex;
  justify-content: center; /* 内部容器水平居中 */
  align-items: center; /* 垂直居中（可选） */
  min-height: 100vh;
  --s: 100px; /* 蜂窝尺寸 */
  --m: 4px; /* 蜂窝间距 */
  --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px); /* 辅助计算值 */
}

.container {
  font-size: 0; /* 消除inline-block元素间的空白 */
  white-space: nowrap; /* 强制所有蜂窝在一行（避免换行） */
  display: inline-block;
}

.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%);
  background: black; /* 默认黑色蜂窝 */
  margin-bottom: calc(var(--m) - var(--s)*0.2885); /* 交错行的间距调整 */
}

/* 标记红色蜂窝 */
.container .red {
  background: red;
}

.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));
}

HTML 代码 #

<div class="main">
  <div class="container">
    <!-- 左侧黑色蜂窝（数量可根据需求调整） -->
    <div></div><div></div><div></div><div></div><div></div>
    <!-- 中间9个红色蜂窝，按3行3列排列 -->
    <div class="red"></div><div class="red"></div><div class="red"></div>
    <div class="red"></div><div class="red"></div><div class="red"></div>
    <div class="red"></div><div class="red"></div><div class="red"></div>
    <!-- 右侧黑色蜂窝（数量可根据需求调整） -->
    <div></div><div></div><div></div><div></div><div></div>
  </div>
</div>

关键修改点 #

• 外层.main设置width:100vw和overflow:hidden，确保超出屏幕的黑色蜂窝被裁剪。
• 给.container添加white-space: nowrap，彻底禁止蜂窝换行，解决原代码宽度缩小时增加行数的问题。
• 通过flex布局让.container在.main中水平居中，保证红色蜂窝始终处于屏幕中心。
• 明确标记红色蜂窝，将其放在容器中间位置，左右填充黑色蜂窝，实现屏幕缩小时黑色蜂窝溢出的效果。

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