I probably have a question as old as time, but my buttons won't cooperate! This is my first time using MUI so maybe there's something I don't understand.
Please take a look at the sandbox.
I want the buttons to be centered in a row, with a bit of space in between. I really thought
<Box display="flex" justifyContent="space-between" flexDirection="row">
would work, but it just smashes them all on the left.
Am I missing something obvious? Thank you for any help!
Change from space-between to center if you want to center align your buttons. You can play around in the interactive example here to know more about different values of justify-content.
justifyContent="center"
EDIT: The flexbox is a container, you need to put it outside and place all of your buttons inside it, You can also use Stack in v5, it's essentially a Box with the display set the flex:
<Stack
justifyContent="center"
gap={2}
flexDirection="row"
width={1.0}
flexWrap="wrap"
>
{mapButtons}
</Stack>
I don't really get your expectations but you can set a space between items of a flex box using gap property.
<Box display="flex" gap={1}>