Html 采用弹性基准的列裕度33.33%？

我想做一个4行3列的数字键盘。我已经将flexbox与

flex-wrap

和

flex-basis:33.33%

一起使用过

问题是我需要在我的列之间留一些空白，但一旦我放入like

margin:0.5em

它就会向下推一项，使它每行只有2项

填充不起作用，边距不起作用，边框对我的透明背景不起作用

。数字网格{
显示器：flex；
柔性包装：包装；
字号：2em；
}
.盒子{
弹性基准：33.33%；
边缘：0.5em；
背景：灰色；
高度：50px；
颜色：白色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

您可以使用

弹性基础中的
计算
调整保证金，如
计算（33.33%-1em）
-见下面的演示：


。数字网格{
显示器：flex；
柔性包装：包装；
字号：2em；
背景：黑色；
}
.盒子{
弹性基础：计算（33.33%-1米）；
边缘：0.5em；
颜色：白色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
谢谢！还有，我怎样才能使.box类成为完美的正方形？我尝试设置高度，但它会变形。对于正方形，请尝试以下操作：