如何减少Flex布局中可悬停展开图片的间距

问题分析 #

你的代码中存在两处关键问题导致间距出现：

1. .mask的flex属性写法错误（flex:1 2 5%中flex-shrink设为2，非悬停容器会过度收缩产生空隙）
2. .mask上的gap属性无效，gap是flex父容器的属性，需要设置在.container上

修改后的代码 #

CSS

.container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15%;
  height: 100vh;
  gap: 0; /* 消除容器间所有间距 */
  overflow: hidden; /* 隐藏超出容器的内容 */
}

.mask {
  flex: 1 1 0%; /* 均匀分配容器宽度，无固定基准值 */
  clip-path: polygon(40% 0, 60% 0, 30% 100%, 10% 100%);
  transition: all 0.2s ease-in;
}

.mask>img {
  width: 100%;
  height: calc(100% - 10vh);
  object-fit: cover;
}

.mask:hover {
  flex: 3 1 0%; /* 悬停时扩大当前容器占比 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  z-index: 1; /* 确保悬停图片在最上层，避免被遮挡 */
}

HTML

<div class="container">
  <div class="mask">
    <img src="https://picsum.photos/id/22/4434/3729">
  </div>
  <div class="mask">
    <img src="https://picsum.photos/id/15/2500/1667">
  </div>
  <div class="mask">
    <img src="https://picsum.photos/id/10/2500/1667">
  </div>
  <div class="mask">
    <img src="https://picsum.photos/id/3/5000/3333">
  </div>
</div>

关键调整说明 #

• gap: 0 直接消除flex容器内子元素的间距，替代你尝试的负边距方案
• 修正flex属性为标准写法，确保非悬停时容器均匀分配空间，悬停时合理扩大占比
• overflow: hidden 防止图片展开时超出父容器范围
• z-index:1 避免悬停的图片被相邻容器的裁剪区域遮挡

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