使用flexbox制作可变宽度网格

Question

我有一个项目需要我使用flexbox构建一个可变宽度按钮的网格，它们都具有相同的高度，并且被一定的空间隔开。

目前，我将每个按钮与margin: 10px 0 0 10px间隔开，这当然是我遇到问题的原因。 请看看我的JSFiddle，看看我的完整代码是什么：https://jsfiddle.net/m025v4uL/1/

我的功能几乎完美，但如果你看到这里，我似乎无法摆脱按钮区域左上方和左边的边距创建空间：

它也适用于此，具有相同的问题：

为此（同样的问题，重叠是有意的，将被利用！）：

我想要的是在按钮之间有空间，而不是在按钮之间。我确信我在这里错过了明显的东西，我真的希望有人可以提供帮助。