如何用CSS实现Flex布局下的盒子悬停伸缩效果？

要实现你需要的交互效果，核心是用flex属性替代固定height分配空间（规避gap与百分比高度的冲突），同时添加平滑过渡动画。以下是完整解决方案：

核心调整思路 #

• 给容器设置明确固定高度，确保flex子元素能基于此计算空间占比
• 用flex属性代替固定height，让空间分配更灵活，过渡动画更稳定
• 借助CSS兄弟选择器，在hover目标元素时同步调整其他子元素的空间占比
• 用子元素的margin替代容器的gap，避免额外空间占用导致布局溢出

完整代码示例 #

<div class="hoverBoards">
  <div class="hoverBoard">盒子1</div>
  <div class="hoverBoard">盒子2</div>
  <div class="hoverBoard">盒子3</div>
</div>

.hoverBoards {
  display: flex;
  flex-direction: column;
  height: 500px; /* 可根据需求调整为vh或其他固定值 */
  overflow: hidden; /* 防止过渡时元素溢出容器 */
}

.hoverBoard {
  flex: 1; /* 默认三等分容器空间 */
  margin-top: 1rem; /* 用margin实现子元素间距 */
  transition: flex 0.3s ease; /* 添加平滑过渡动画 */
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hoverBoard:first-child {
  margin-top: 0; /* 移除第一个盒子的顶部间距 */
}

/* hover时目标盒子占2/3空间，其余盒子各占1/6 */
.hoverBoard:hover {
  flex: 2;
}

.hoverBoard:hover ~ .hoverBoard {
  flex: 0.5;
}

关键说明 #

• 用flex属性控制空间占比，默认1:1:1，hover时变为2:0.5:0.5，总占比保持一致，确保所有变化在原有空间内完成
• transition: flex比过渡height兼容性更好，动画更流畅
• 容器设置overflow:hidden可避免过渡过程中可能出现的元素溢出问题
• 用margin替代gap是因为gap会占用容器高度空间，导致百分比高度计算混乱，而margin属于子元素自身属性，不影响容器内的可分配空间

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