如何实现Hover时Flex子项宽度强制占容器50%且其余子项均分剩余空间（带动画）

我完全理解你想要实现的效果：Flex容器里的子项默认均分总宽度，hover其中一个时它固定占据容器的50%，剩下的子项自动均分剩余空间，还要有平滑的动画过渡。你的思路方向是对的，但问题出在flex-basis和flex-grow的组合逻辑上，我来帮你修正：

正确的CSS代码 #

.flex-container {
  width: 100%;
  display: flex;
  height: 300px;
}

.flex-item {
  flex: 1; /* 等价于 flex-grow:1, flex-shrink:1, flex-basis:0% */
  transition: flex 0.4s ease; /* 针对性过渡flex属性，比all更高效 */
}

.flex-item:hover {
  flex: 0 0 50%; /* 关键设置：grow设为0避免额外扩张，shrink设为0防止被压缩，basis固定为50% */
}

为什么你的原代码不生效？ #

你之前只给hover的子项设置了flex-basis:50%，但flex:1包含的flex-grow:1依然生效。这意味着这个子项会在50%的基础上，和其他子项一起瓜分容器的剩余空间，导致它的宽度会超过50%，达不到你想要的固定宽度效果。

而改成flex:0 0 50%后：

• flex-grow:0：这个子项不会再去抢占额外的空间
• flex-shrink:0：确保它不会被其他子项压缩，稳定保持50%的宽度
• flex-basis:50%：直接以容器宽度的50%作为初始基准宽度

其余子项保持flex:1，会自动把剩下的50%空间均等分配，完美符合你的需求，而且过渡动画也能正常生效。

额外提示 #

如果你的容器有内边距（padding），记得给容器加上box-sizing: border-box，这样width:100%会包含内边距，避免子项宽度超出预期。

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