如何让Flex布局元素组整体水平居中且内部元素左对齐？

当前代码 #

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

当前效果 #

期望效果 #

已尝试无效的操作 #

• 将内层Box的justifyContent改为"center"
• 给外层Box设置justifyContent: "center"

可行解决方案 #

要实现「元素组整体水平居中，同时组内元素保持左对齐」的效果，核心是让内层的flex容器仅占据内容所需宽度，再让它在外层容器中居中。以下两种方法均可实现：

方法1：外层启用flex居中 + 内层适配内容宽度 #

修改外层Box样式，开启flex布局并设置水平居中，同时给内层Box添加width: "fit-content"（让容器宽度贴合内部元素）：

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

方法2：内层用自动margin居中 + 适配内容宽度 #

如果不想改动外层布局，直接给内层Box添加margin: "0 auto"和width: "fit-content"即可：

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

原理说明 #

之前的操作无效，是因为默认状态下flex容器会占满父容器的宽度——哪怕外层设置了居中，内层容器还是满宽状态，组内元素左对齐自然会贴到容器左侧。让内层容器宽度适配内容后再进行居中，就能达成你想要的效果。

内容的提问来源于stack exchange，提问作者Evan Hessler