[system] Missing documentation in flex-box

[emanual4real]

Expected Behavior:

I expect to see all the justifyContent options like space-between and space-evenly on https://mui.com/system/flexbox/

Actual Behavior

I do not see examples or documentation for space-between or space-evenly

I'm new to MUI and only found out about these options from a MUI veteran user.

[siriwatknp]

Note that justifyContent is not MUI specific but a CSS property. I think that's why we don't document all of its value. However, adding a couple of lines might help people to see what options they can use. 👍

[oliviertassinari]

If we want to be exhaustive, we would need to cover:

justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;
justify-content: normal;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: stretch;
justify-content: safe center;
justify-content: unsafe center;
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: unset;

So I would suggest we don't list everything. We could:

1. List the most popular ones: [system] Missing documentation in flex-box #29050 (comment)
2. Document that all the values are supported, that what we include is only an example. Maybe we could even link MDN https://developer.mozilla.org/docs/Web/CSS/justify-content
3. Rework the design, it could look better:

maybe we should follow this style https://mui.com/system/grid/#grid-template-columns cc @danilo-leal.

[mochi-sann]

Can I work this?

[omarmosid]

@oliviertassinari @siriwatknp I was able get this working locally:

1. Added space-between, space-around and space-evenly as they seem to be most popular ones
2. Added the MDN link right underneath the example code
3. Changed the styling based on how it's being done for grid

Before I go ahead and submit a PR, should I apply this same Box item styling to everywhere else where we have these boxes? (all the other flexbox examples have the item box with gray background)