本文讲解如何利用 flex-grow、flex-basis: 0 和精准过渡控制，实现多卡片水平排列下的 hover 放大效果，确保所有元素始终保留在视口内，避免因尺寸变化导致的位移或溢出问题。
本文讲解如何利用 `flex-grow`、`flex-basis: 0` 和精准过渡控制，实现多卡片水平排列下的 hover 放大效果，确保所有元素始终保留在视口内，避免因尺寸变化导致的位移或溢出问题。
在构建类似 Google Arts & Culture 国家公园项目中那种平滑、紧凑、无跳动的横向卡片悬停交互时，一个常见陷阱是：直接增大某子项的 flex-basis（如从 16.3% → 40%）会导致其余项被强行压缩或整体溢出容器，尤其当使用 margin-left/right 等“补位”技巧时，极易破坏布局稳定性，甚至使末尾元素被推出视窗。
核心原理：均分基础空间 + 动态独占伸展
解决方案的关键在于放弃固定初始宽度，改用 flex-basis: 0 配合 flex-grow: 1 —— 这样所有子项在默认状态下“不占原始空间”，仅靠 flex-grow 均匀瓜分父容器剩余宽度（即真正实现等宽）。当某个元素 hover 时，通过设置其 flex-basis: 40%（此时 flex-grow 失效），它将获得绝对宽度；而其他未 hover 元素因 flex-basis: 0 且 flex-shrink: 0 被强制压缩至最小内容宽度（视觉上近乎“收拢”），从而自然腾出空间，全程无位移、无溢出。
以下是精简可靠的实现代码：
html, body {
height: 100%;
margin: 0;
}
.grow {
display: flex;
justify-content: center;
height: 100vh;
overflow-x: hidden; /* 关键：隐藏潜在横向溢出 */
}
.grow > div {
flex-grow: 1; /* 均分可用空间 */
flex-basis: 0; /* 重置基础尺寸，避免初始宽度干扰 */
flex-shrink: 0; /* 禁止收缩（配合 basis:0，确保 hover 时其他项“让出”而非挤压） */
transition: flex-basis 0.5s ease-in-out;
border: 1px solid #ffcc00;
/* 推荐添加 box-sizing: border-box，避免边框影响计算 */
box-sizing: border-box;
}
.grow > div:hover {
flex-basis: 40%; /* 悬浮时占据 40% 容器宽度 */
}
/* 修正原 HEX 错误（#2A75A → #1A75AA 等） */
.box1 { background-color: #1A75AA; }
.box2 { background-color: #2B75AA; }
.box3 { background-color: #3C75AA; }
.box4 { background-color: #4D75AA; }
.box5 { background-color: #5E75AA; }
.box6 { background-color: #6F75AA; }<div class="grow">
<div class="box1">
<div class="ninetyDegreeText">Box1</div>
<div class="centeredText">Box1Html</div>
</div>
<div class="box2">
<div class="ninetyDegreeText">Box2</div>
<div class="centeredText">Box2</div>
</div>
<div class="box3">
<div class="ninetyDegreeText">Box3</div>
<div class="centeredText">Box3Html</div>
</div>
<div class="box4">
<div class="ninetyDegreeText">Box4</div>
<div class="centeredText">Box4Html</div>
</div>
<div class="box5">
<div class="ninetyDegreeText">Box5</div>
<div class="centeredText">Box5Html</div>
</div>
<div class="box6">
<div class="ninetyDegreeText">Box6</div>
<div class="centeredText">Box6Html</div>
</div>
</div>✅ 注意事项与优化建议：
- 移除所有 margin-left/right 类 hack（如原 .grow>div:first-child:hover { margin-left: 25% }），它们会破坏 flex 的流式计算逻辑；
- flex-shrink: 0 必须保留，否则未 hover 项可能被过度压缩甚至折叠，影响视觉一致性；
- 若需更精细控制缩放比例，可对不同卡片设置差异化 flex-basis（如中间项设为 50%，两侧设为 30%），但需确保总和 ≤ 100% 以避免溢出；
- 在真实项目中，建议为 .ninetyDegreeText 和 .centeredText 添加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 防止文本换行撑开容器。
该方案兼顾性能（纯 CSS 实现）、可维护性（无 JS、无 hack）与兼容性（支持所有现代浏览器及 IE11+），是构建专业级响应式悬停布局的推荐范式。
立即学习“前端免费学习笔记（深入）”；
