css - 如何在多行上均匀分布 flexbox 项目？

Question

我正在开发一个菜单栏，它的所有按钮均匀分布在导航元素（容器）的中心。我需要这种布局在大多数设备上看起来都很好，不管它的大小。问题是，在我正在测试的一种平板电脑尺寸下，只有一个按钮进入下一行，留下了不受欢迎的外观。有没有办法使用 css 让所有项目均匀分布在所有行上？

这是导航的样式块：

nav {
    display: -ms-flex;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    height: 100px;
    background-color: #000;
}