calc-button-row样式异常：按钮布局间距问题求助

问题说明 #

设置.calc-button-row为display: flex; justify-content: space-between; margin: 5% 0;时，按钮水平排布错乱；移除display:flex则按钮堆叠混乱。当前按钮排列间距不均、部分错位，期望实现按钮整齐分布，每行按钮按预设宽度（单格、双格、三格）占满整行，间距均匀。

修复思路 #

问题根源在于justify-content: space-between会让按钮两端对齐，但按钮的flex-basis百分比加上默认间距计算后，无法适配容器宽度，导致换行或错位。改用gap属性控制按钮间的固定间距，同时用flex占比替代固定flex-basis，确保每行按钮总宽度加上gap刚好填满容器，再配合容器自适应宽度实现整齐布局。

修改后的CSS代码 #

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

nav {
    height: 900px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0rem calc((100vw - 1300px) / 2);
}

.nav-items {
    display: flex;
    justify-content: flex-start;
}

.logo {
    color: #000;
    font-size: 1.5rem;
    font-weight: bold;
    font-style: italic;
    padding: 0 2rem;
}

nav a {
    text-decoration: none;
    color: #000;
    padding: 0 1.5rem;
}

nav a:hover {
    color: #fff;
}

html {
    box-sizing: border-box;
    height: 100%;
}

body {
    align-items: center;
    background: #eb92be;
    display: flex;
    font-family: "Dosis", sans-serif;
    font-display: swap;
    height: inherit;
    justify-content: center;
}

.wrapper {
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.34);
    flex-basis: 400px;
    height: 540px;
    padding: 20px 35px;
}

/* 核心修改：按钮行布局 */
.calc-button-row {
    display: flex;
    gap: 10px; /* 按钮间固定间距，避免分布不均 */
    margin: 5% 0;
    width: 100%; /* 确保行占满容器宽度 */
}

.calc-button {
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    flex: 1; /* 单格按钮自动均分剩余空间 */
    font-family: inherit;
    font-size: 24px;
    height: 65px;
}

.screen {
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(35, 35, 35, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #232323;
    font-size: 35px;
    overflow: auto;
    padding: 20px;
    text-align: right;
    width: 100%; /* 屏幕宽度适配容器，避免固定宽度溢出 */
}

.calc-button:last-child{
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
    color: #ffff;
    background: #d72880;
}
.calc-button:last-child:hover{
    background-color: inherit;
}

.calc-button:active{
    background-color: #63c9b4;
}

/* 多格按钮占比调整 */
.double{
    flex: 2; /* 双格按钮占2份空间 */
}
.triple{
    flex: 3; /* 三格按钮占3份空间 */
}

关键修改点 #

• 用gap:10px替代justify-content: space-between，通过固定间距控制按钮间距离，避免两端对齐导致的布局偏差
• 将.calc-button的flex-basis:20%改为flex:1，让单格按钮自动均分每行剩余空间
• 把.screen的固定宽度改为width:100%，适配容器宽度避免溢出
• 调整.double和.triple为flex:2和flex:3，让多格按钮按比例占据空间，实现预设布局

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