微信小程序科学计算器布局问题

Question

最近想用微信小程序做一个科学计算器，做UI布局时用到flex布局，水平排布，设置每个item宽20%来控制一行5个按钮。现在基本实现了效果：

黄色方框部分明显不在一条垂直线上，发现加了1rpx的border之后，0按键的宽度少了1。但是同样宽度的等于键的宽度就没问题啊，怎么回事？完整代码如下：
https://jsfiddle.net/phoenixo...

有人说上面链接打不开，请用下面这个：
https://codepen.io/phoenixor/...

Answer 1

检查一下 box-sizing;
问题出在这里：
图片描述

1. 右边都是靠比例，所以 “=”号和上面的 “DegRed” 一样宽；
2. 而下面比例多出来一个 1px的 border。

解决(我只是发现了问题，答案是参照下面这个同学回答的，得多谢他)：
给 “0” 键设置：

.double-width {
    flex: 0 0 66.666%; // 最精确是保留三位小数
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: white;
    border-width: 1px;
    border-style: solid;
    border-color: black;
}```

Answer 2

其实你等号的盒子也是少了1px;
方案一：
单独设置宽度calc(40% + 1px)
方案二：
添加
box-sizing: border-box;

看过代码，只要修改一下
double-width
.double-width {
//flex:2;
flex: 0 0 66.7%;
}

另外：
你有时候用 width: 60%;
有时候用 flex: 1;
有时候用 flex: 0 0 40%;
这不是自己给自己添堵吗？统一使用百分百划分5份，每份宽度20%