如何让MUI AppBar内的用户信息Box实现完全右对齐？

你的问题出在flex布局的空间分配上——当前父容器app-bar-box是flex布局，但两个子Box之间没有利用剩余空间分隔，导致用户信息Box只能跟着前一个Box的末尾走。

两种快速解决方法： #

方法一：让左侧Box占据剩余空间

给左侧的logo-env-txt-box添加flexGrow: 1样式，它会自动填满容器的剩余空间，把右侧用户信息Box挤到页面最右：

<AppBar position="fixed" className={classes.appBar}>
    <Toolbar>
        <div id="app-bar-box" style={{ width: "100%", display: "flex" }}>
            <Box id="logo-env-txt-box" style={{ display: "flex", alignItems: "center", flexGrow: 1 }}>
                <a href="/home">
                    <SVGLOGO className="logo_stack" />
                    <SVGLOGOHORI className="logo" />
                </a>
                <Typography className={classes.envFlag} hidden={hidden}>
                    You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
                    <a href="">here</a> to go to production.
                </Typography>
            </Box>
            <Box id="user-info-box" style={{ display: "flex", alignItems: "center", height: "64px" }}>
                <i className="dds__icon dds__icon--user" style={{ fontSize: "24px", color: "#636363", marginRight: "10px" }}></i>
                <Box style={{ marginLeft: "10px" }}>
                    <Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
                        John Doe Admin
                    </Typography>
                    <Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
                        Product Lead
                    </Typography>
                </Box>
            </Box>
        </div>
    </Toolbar>
</AppBar>

方法二：插入空白分隔Box

如果不想让左侧Box占满空间，在两个Box之间加一个空的Box并设置flexGrow: 1，用它填充剩余空间：

<AppBar position="fixed" className={classes.appBar}>
    <Toolbar>
        <div id="app-bar-box" style={{ width: "100%", display: "flex" }}>
            <Box id="logo-env-txt-box" style={{ display: "flex", alignItems: "center" }}>
                <a href="/home">
                    <SVGLOGO className="logo_stack" />
                    <SVGLOGOHORI className="logo" />
                </a>
                <Typography className={classes.envFlag} hidden={hidden}>
                    You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
                    <a href="">here</a> to go to production.
                </Typography>
            </Box>
            {/* 新增空白分隔Box */}
            <Box style={{ flexGrow: 1 }} />
            <Box id="user-info-box" style={{ display: "flex", alignItems: "center", height: "64px" }}>
                <i className="dds__icon dds__icon--user" style={{ fontSize: "24px", color: "#636363", marginRight: "10px" }}></i>
                <Box style={{ marginLeft: "10px" }}>
                    <Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
                        John Doe Admin
                    </Typography>
                    <Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
                        Product Lead
                    </Typography>
                </Box>
            </Box>
        </div>
    </Toolbar>
</AppBar>

补充说明： #

• 你给user-info-box设置的固定宽度400px可以去掉，让它根据内容自适应，避免小屏幕出现溢出问题。
• flex布局中flexGrow:1的作用是让元素分配容器的剩余空间，这是实现左右两端对齐最常用的技巧。

内容的提问来源于stack exchange，提问作者Ciaran Crowley