计算器布局问题：如何让flex-grow:2按钮精确占两个按钮宽度？

问题出在margin叠加和flex-basis默认值的组合影响：

• 原代码中每个按钮设置了margin:2px，相邻按钮之间的间距是2px+2px=4px，容器左右也各有2px的margin，导致最后一行的总margin和上方行不一致。
• 原按钮的flex-basis为默认的auto，flex-grow是在按钮自身基础宽度之外分配剩余空间，无法严格按比例计算。

修正方案 #

1. 用gap+padding替代margin：避免margin叠加导致的空间计算误差，同时保持按钮的间距效果。
2. 统一设置flex-basis:0：让flex-grow基于0宽度分配空间，确保比例严格生效。
3. 调整flex比例匹配总份数：上方行4个按钮各占1份（总4份），最后一行两个普通按钮各占1份，等号按钮占2份（总4份），保证每份宽度完全一致。

修改后的代码 #

HTML（结构无需改动）

<body>
    <div class="container">
            <form>
                <div class="display">
                    <input type="text" name="display">
                </div>
                <div class="column1">
                    <input type="button" value="AC">
                    <input type="button" value="+/-">
                    <input type="button" value="%">
                    <input type="button" value="/">
                </div>
                <div class="column2">
                    <input type="button" value="7">
                    <input type="button" value="8">
                    <input type="button" value="9">
                    <input type="button" value="*">
                </div>
                <div class="column3">
                    <input type="button" value="4">
                    <input type="button" value="5">
                    <input type="button" value="6">
                    <input type="button" value="-">
                </div>
                <div class="column4">
                    <input type="button" value="1">
                    <input type="button" value="2">
                    <input type="button" value="3">
                    <input type="button" value="+">
                </div>
                <div class="column5">
                    <input type="button" class='single' value="0">
                    <input type="button" class='single' value=".">
                    <input type="button" class='double' value="=">
                </div>
            </form>
    </div>
</body>

CSS

* {
    border: 1px solid black;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 100%;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
    width: 25%;
    border: 4px solid black;
}

form {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
 
.display input {
    background-color: rgb(207, 204, 204);
    width: 100%;
}

.column1, .column2, .column3, .column4, .column5, .display {
    flex: 1 1 100%;
    display: flex;
    padding: 2px; /* 替代按钮的上下左右margin，保持原间距 */
    gap: 4px; /* 按钮之间的间距，等于原两个margin的总和 */
    background-color: darkgrey;
}

/* 统一按钮的flex设置，flex-basis:0确保比例严格生效 */
.column1 input, .column2 input, .column3 input, .column4 input, .column5 input {
    flex: 1 1 0;
    border-radius: 5px;
    padding: 0;
}

/* 等号按钮占2份宽度 */
.double {
    flex-grow: 2;
}

关键说明 #

• gap:4px直接控制按钮之间的间距，避免了原margin叠加导致的空间计算混乱。
• flex-basis:0让flex容器分配空间时，完全按照flex-grow的比例计算，不再受按钮自身默认宽度影响。
• 上方行总份数是1+1+1+1=4，最后一行总份数是1+1+2=4，两份宽度的等号按钮自然等于两个普通按钮的宽度总和，完美对齐上方行。

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