如何实现Flex容器内按钮hover放大不挤压其他元素

你当前通过修改font-size实现按钮hover放大时，会改变按钮的实际占位尺寸，而Flex布局下项目会根据自身尺寸动态调整，导致挤压旁边的按钮。要避免这种情况，核心是让按钮的布局空间保持固定，只在视觉层面实现放大效果。下面提供两种实用解决方案：

方案一：用transform: scale()实现视觉放大（推荐） #

直接用CSS的transform: scale()替代修改font-size，这种方式不会改变元素在文档流中的占位尺寸，完全不会影响相邻元素的布局：

修改按钮的hover样式：

button:hover{
    transform: scale(1.1); /* 缩放比例可根据需求调整 */
    transition: transform 0.2s ease; /* 加上过渡动画，放大效果更平滑 */
}

同时给按钮默认样式加上过渡属性，让hover状态切换更自然：

button{
    /* 原有样式不变 */
    transition: transform 0.2s ease;
}

方案二：固定按钮的基础占位尺寸 #

如果一定要通过修改font-size实现放大，可以给按钮设置固定的min-width和min-height，确保hover前后按钮的占位空间不变：

button{
    /* 原有样式不变 */
    min-width: 120px; /* 根据按钮文字长度设置合适的最小宽度 */
    min-height: 40px; /* 最小高度，适配font-size变大后的内容 */
    text-align: center; /* 确保文字始终居中 */
}

button:hover{
    font-size: 17px;
    transition: font-size 0.2s ease;
}

修改后的完整代码示例（方案一） #

:root{
    --Primary: #1c1c1e;
    --Secondary: #2c2c2e;
    --Text: #fff;
    --TextGradient: -webkit-linear-gradient(45deg, #e36577, #f6edb2);
    --Gradient: linear-gradient(45deg, #e36577, #f6edb2)
}
body{
    background-color: var(--Secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
*{
    font-family: 'system-ui', sans-serif;
    color: var(--Text);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
button{
    --border-radius: 100px;
    background-color: var(--Primary);
    border: none;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 15px;
    position: relative;
    transition: transform 0.2s ease;
}

button:hover{
    transform: scale(1.1);
}

.about-btns{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.highlight-btn{
    --border-width: 5px;
    background: var(--Gradient);
    z-index: 1;
}
.highlight-btn::before{
    content: '';
    display: block;
    height: calc(100% - calc(var(--border-width) * 2));
    width: calc(100% - calc(var(--border-width) * 2));
    background: var(--Primary);
    position: absolute;
    top: var(--border-width);
    left: var(--border-width);
    border-radius: calc(var(--border-radius) - var(--border-width));
    z-index: -1;
}

<div class="about-btns">
  <button class="highlight-btn">See my work</button>
  <button>Learn more</button>
</div>

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