强制 Flex 项目的宽度为 50%

Question

我正在尝试创建一个基于 Flex 的容器，其中的项目应在悬停时通过动画展开。所有物品首先应具有相同的宽度，具体取决于容器的总宽度。悬停某个项目时，悬停的项目应恰好是容器总宽度的 50%，其余未悬停的项目会缩小以填充剩余空间。

这似乎是一件很容易做的事情，但我无法真正思考如何实现我想要的结果。

我试过这段代码： https: //codepen.io/tobiasger/pen/xxRWxpV

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

.flex-item {
  flex:1;
  transition: all 0.4s ease;
}

.flex-item:hover {
  flex-basis:50%;
}

但flex-basis结果并没有达到容器的 50%。我不确定它的百分比基于什么，它似乎比实际容器宽度更接近窗口宽度。

我还尝试对min-width悬停项目应用 50% 的值，但这似乎不可能设置动画。

目标是不必根据容器包含的项目数量为容器创建特定的类。如果能够始终强制悬停项目恰好为容器宽度的 50%，同时让其余项目均匀填充剩余的 50%，并且还为该宽度变化设置动画，我会非常高兴！

Answer 1

只需添加flex-grow:0;到.flex-item:hover.

.flex-item:hover {
  flex-basis: 50%;
  flex-grow: 0;
}

这也有效

.flex-item:hover {
  flex: 0 50%;
}