Html Flexbox使用每行设置的编号保持子宽度静态

我正在使用flexbox创建一组按钮，这些按钮需要居中，并且是偶数组（本例为每行3个）。但是，我的选项似乎是将它们分组，但通过添加到子对象中允许宽度增长：

flex: 0 0 20% 

或者使其保持静态宽度，并允许flex wrap根据屏幕大小更改其位置。 有没有一种方法可以同时允许这两种情况？也就是说，对于大屏幕尺寸，有2组3个按钮，并允许对较小屏幕进行适当包装，但始终保持静态宽度

.parent{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.孩子{
文字装饰：无！重要；
显示：内联块；
宽度：160px；
高度：140像素；
填充顶部：10px；
利润率：30px 30px 30px 30px；
边界半径：30px；
边框：1px实心#003595；
}

CSS网格可以做到这一点



正文{
文本对齐：居中；
}
.家长{
显示：内联网格；
网格间距：1米；
网格模板列：重复（3，1fr）；
}
.孩子{
文字装饰：无！重要；
宽度：160px；
高度：140像素；
填充顶部：10px；
边界半径：30px；
边框：1px实心#003595；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}

CSS网格可以做到这一点



正文{
文本对齐：居中；
}
.家长{
显示：内联网格；
网格间距：1米；
网格模板列：重复（3，1fr）；
}
.孩子{
文字装饰：无！重要；
宽度：160px；
高度：140像素；
填充顶部：10px；
边界半径：30px；
边框：1px实心#003595；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
对于flex解决方案，您只需使用分隔符flex子项来分隔行，并将其宽度设置为100%。我还为容器添加了
justify content:space-between
。因为您有一个除法器，所以不需要计算保证金


.parent{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：之间的空间；
}
.孩子{
文字装饰：无！重要；
显示：内联块；
宽度：160px；
高度：140像素；
填充顶部：10px；
利润率：30px 30px 30px 30px；
边界半径：30px；
边框：1px实心#003595；
}
.分隔器{
宽度：100%；
}
对于flex解决方案，您只需使用分隔符flex子项来分隔行，并将其宽度设置为100%。我还为容器添加了
justify content:space-between
。因为您有一个除法器，所以不需要计算保证金


.parent{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：之间的空间；
}
.孩子{
文字装饰：无！重要；
显示：内联块；
宽度：160px；
高度：140像素；
填充顶部：10px；
利润率：30px 30px 30px 30px；
边界半径：30px；
边框：1px实心#003595；
}
.分隔器{
宽度：100%；
}
您说您需要将按钮居中，那么在父按钮上添加一个
最大宽度
，然后使用
边距：自动
和
对齐内容：居中
将如何？这样，它也可以在较小的屏幕上正确包装：

.parent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    max-width: 700px;
    margin: auto;
    justify-content: center;
}

您说需要将按钮居中，那么在父项中添加一个
最大宽度
，然后使用
边距：自动
和
对齐内容：居中
将如何？这样，它也可以在较小的屏幕上正确包装：

.parent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    max-width: 700px;
    margin: auto;
    justify-content: center;
}

它们看起来很棒，与您描述的一模一样，那么问题出在哪里呢？我对您的问题有点困惑，如果您将宽度设置为固定值，并将flex wrap设置为wrap，那么它在需要时就会自动进行wrap。您遇到的问题是什么？@Tarek.hms如果我使用flexflow，它们要么不保持3人一组（看小提琴，一行显示5人，下一行显示1人），要么不保持静态宽度。@他们没有预设的3人一组。看小提琴。@JWiley你说的分组是什么意思？正如您希望最多每行3个一样？它们看起来很好，完全如您所述，那么问题出在哪里？我对您的问题有点困惑，如果您将宽度设置为固定值，并将flex wrap设置为wrap，那么它将在需要时自动进行wrap。您遇到的问题是什么？@Tarek.hms如果我使用flexflow，它们要么不保持3人一组（看小提琴，一行显示5人，下一行显示1人），要么不保持静态宽度。@他们没有预设的3人一组。看小提琴。@JWiley你说的分组是什么意思？正如您希望最多每行3个一样？谢谢-这是一个很好的解决方案，但我感兴趣的是您如何使用flexbox做到这一点。这也将使滚动更小的屏幕，而不是包装的项目。谢谢-这是一个伟大的解决方案，但我感兴趣的是如何使用flexbox做到这一点。这也将允许滚动较小的屏幕，而不是包装项目。