Flex菜单项hover时存在间隙：使用align-content:stretch无效

问题出在你给菜单容器设置了justify-content: space-between，这个属性会让菜单项（<li>）在容器内均匀分布，彼此之间产生空白间隙。当hover <li>时，只有<li>自身的背景变色，间隙部分没有被覆盖，所以视觉上出现了明显的空隙。

解决方案 #

修改CSS，让每个菜单项平分容器宽度，消除间隙：

.menu {
  display: flex;
  /* 移除justify-content: space-between，避免生成间隙 */
}

.menu li {
  display: flex;
  padding: 10px;
  flex: 1; /* 让每个li平分容器的可用宽度 */
  justify-content: center; /* 保证菜单项内容居中显示 */
}

.menu li:hover {
  background-color: #ddd;
}

.menu li a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

原理说明 #

• flex: 1 会让所有<li>元素自动填充容器的剩余空间，彼此之间不再有空隙
• justify-content: center 确保每个菜单项的图标和文字在<li>内居中，保持原有布局的视觉效果
• 此时hover <li>时，背景色会覆盖整个<li>区域，不会再出现间隙

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