MUI 按钮不会居中答案

【问题标题】：MUI buttons won't centerMUI 按钮不会居中
【发布时间】：2021-12-19 08:44:17
【问题描述】：

我可能有一个古老的问题，但我的按钮不配合！这是我第一次使用 MUI，所以可能有一些我不明白的地方。

请查看sandbox。

我希望按钮在一行中居中，中间留有一点空间。我真的以为

<Box display="flex" justifyContent="space-between" flexDirection="row">

会起作用，但它只会把它们都打碎在左边。

我是否遗漏了一些明显的东西？感谢您的帮助！

【问题讨论】：

【解决方案1】：

如果您想将按钮居中对齐，请将 space-between 更改为 center。您可以在交互式示例here 中进行操作，以了解更多关于justify-content 的不同值的信息。

justifyContent="center"

编辑：flexbox是一个容器，你需要把它放在外面，把你所有的按钮都放在里面，你也可以在v5中使用Stack，它本质上是一个Box显示设置flex：

<Stack
  justifyContent="center"
  gap={2}
  flexDirection="row"
  width={1.0}
  flexWrap="wrap"
>
  {mapButtons}
</Stack>

【讨论】：

【解决方案2】：

我并没有真正得到您的期望，但您可以使用 gap 属性在弹性框的项目之间设置一个空格。

<Box display="flex" gap={1}>

【讨论】：