Flexbox单个元素无法居中：hover时仅右侧扩展且比例异常

问题根源 #

1. flex-grow比例混乱：默认flex-basis: auto会让flex-grow基于元素自身内容宽度计算剩余空间分配，而非均等基准，导致你设置的2:1比例完全失效，悬停元素占比远超预期。
2. 单侧扩展视觉问题：Flex元素默认沿主轴起始端（左侧）布局，未设置内容居中或正确基准时，宽度增长的视觉效果会偏向右侧，而非向两侧均匀扩展。

修复步骤 #

1. 强制均等比例基准 #

给所有Flex子元素设置flex: 1 1 0%，这会将flex-basis设为0%，让flex-grow严格基于均等的0宽度基准计算，确保2:1的比例准确生效。

2. 实现双向扩展视觉效果 #

让子元素内部内容居中，这样当元素宽度增加时，内容始终保持在元素中心，视觉上就会呈现向两侧扩展的效果。配合过渡动画保证平滑变化。

完整可运行代码 #

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

.flex-item {
  flex: 1 1 0%; /* 核心：重置基准宽度，保证比例正确 */
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  border: 1px solid #ddd;
}

.flex-item:hover {
  flex-grow: 2; /* 悬停时占比为其他元素的2倍 */
  background: #ccc;
}

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
</div>

补充说明 #

• justify-content: center是控制容器内元素的整体对齐，无法改变单个元素的宽度增长方向，所以你之前添加它没用。
• 如果需要更极致的"居中扩展"视觉（元素本身位置不变，仅向两侧拉伸），可以结合transform: scaleX()和transform-origin: center，但这种方式不会改变元素的实际布局空间，仅做视觉缩放，根据你的需求选择即可。

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