Center group of items horizontally, but left align items

Asked Mar 29 '23 at 16:13

Active Mar 29 '23 at 17:24

Viewed 28 times

I think it's easier to explain it visually. Here is the code I have.

<Box
    sx={{
        height: 500,
        paddingTop: 5,
    }}
>
<Box
    sx={{
        display: "flex",
        justifyContent: "flex-start",
        flexWrap: "wrap",
    }}
>
    {items}
</Box>
</Box>;

Produces this result:

This is what I want it to look like. The group of items are centered on the page, but they are still left aligned.

If I simply change the justifyContent to "center" on the inner Box it will not achieve what I am going for. If I do justifyContent "center" on the outer it does nothing.

edited Mar 29 '23 at 17:24

InSync

4,851
4
8
30

asked Mar 29 '23 at 16:13

Evan Hessler

Does this answer your question? [How to align the items to the start and center the flex container?](https://stackoverflow.com/questions/33551865/how-to-align-the-items-to-the-start-and-center-the-flex-container) – Robo Robok Mar 29 '23 at 16:29
Was not able to get it. – Evan Hessler Mar 29 '23 at 18:38
https://stackoverflow.com/q/32802202/3597276 – Michael Benjamin Mar 29 '23 at 18:39

Center group of items horizontally, but left align items

0 Answers0