在使用Flexbox构建六边形网格布局时，窄屏下出现内容溢出是开发者经常遇到的典型问题，通常表现为网格元素超出父容器宽度，触发页面横向滚动，破坏整体布局效果。
一、Flexbox六边形网格溢出的原因
大多数六边形网格的实现会先给六边形元素设置固定的宽度和高度，比如使用width: 100px、height: 115px这类固定像素值。当屏幕宽度变窄时，父容器的可用宽度小于所有六边形元素的总宽度，Flexbox的默认收缩规则无法让固定尺寸的元素自动缩小，就会出现溢出问题。
另外部分实现中会给六边形设置固定的margin值，这些固定间距在窄屏下也会进一步挤压可用空间，加剧溢出情况。
二、响应式单位vw的基本特性
vw是CSS中基于视口宽度的响应式单位，1vw等于视口宽度的1%。视口宽度指的是浏览器当前可见区域的宽度，当屏幕尺寸变化时，vw对应的实际像素值会自动跟随变化，非常适合用来实现自适应尺寸。
比如视口宽度是375px时，10vw就等于37.5px；视口宽度变成768px时，10vw就等于76.8px，不需要手动编写媒体查询就能实现尺寸跟随屏幕变化。
三、使用vw解决六边形网格溢出问题
1. 基础六边形样式实现
首先我们先实现一个基础的Flexbox六边形网格，使用固定尺寸的代码如下，在窄屏下会出现溢出：
/* 父容器样式 */
.hex-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 20px;
}
/* 六边形基础样式 固定尺寸 */
.hexagon {
width: 100px;
height: 115px;
background-color: #4a90e2;
position: relative;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
对应的HTML结构：
<div class="hex-grid">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
2. 替换为vw单位实现自适应
我们将六边形的宽度、高度以及间距都替换为vw单位，让所有尺寸都跟随视口宽度变化：
/* 父容器样式 间距使用vw */
.hex-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2vw;
padding: 3vw;
}
/* 六边形样式 尺寸使用vw */
.hexagon {
width: 20vw;
height: calc(20vw * 1.15); /* 保持六边形宽高比例 */
background-color: #4a90e2;
position: relative;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
这里需要注意六边形的宽高比例要保持一致，我们通过calc函数计算高度，让高度始终是宽度的1.15倍，避免六边形变形。同时gap和padding也使用vw单位，保证所有间距都能跟随屏幕自适应。
3. 添加最大尺寸限制避免过大
在宽屏下vw单位可能会让六边形变得过大，我们可以添加max-width和max-height限制最大尺寸：
.hexagon {
width: 20vw;
height: calc(20vw * 1.15);
max-width: 120px;
max-height: calc(120px * 1.15);
background-color: #4a90e2;
position: relative;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
四、注意事项
- vw单位是基于视口宽度计算的，如果页面有滚动条，部分浏览器的视口宽度会包含滚动条宽度，可能会导致计算偏差，可以通过设置
html { scrollbar-gutter: stable; }避免这个问题。 - 如果六边形内部有文字内容，文字大小也需要使用vw或者
clamp函数实现自适应，避免文字溢出六边形容器。 - 可以结合
min()函数设置最小尺寸，比如width: min(20vw, 120px)，让代码更简洁，同时实现最小和最大尺寸的限制。
通过上述方法，Flexbox六边形网格在窄屏下的溢出问题可以得到彻底解决，同时布局能在不同屏幕尺寸下保持良好的适配效果，vw单位的使用也让响应式布局的实现更加简洁高效。