React JS汉堡菜单：右侧圆形图标无法靠右定位问题求助

我用React JS制作汉堡菜单时，遇到一个问题——无法把右侧的圆形向右图标定位到右侧位置，尝试添加padding-right属性也没用。

JS代码 #

{
    SidebarData.map((item, index) => {
        return (
            <div >
                <li key={index} className={item.cName}>
                    <Link to={item.path}>
                        {item.icon}
                        <span className="nav-title">{item.title}</span>
                        <span className="roundright">
                            <PageRight />
                        </span>
                    </Link>
                </li>
            </div>
        );
    })
}

CSS代码 #

.nav-text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px 8px 16px;
    list-style: none;
    height: 50px;
    text-align: center;
}

.nav-text a {
    text-decoration: none;
    color: #FFFFFF;
    border: 1px solid white;
    font-size: 14px;
    width: 90%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 4px;
}

.nav-title {
    flex: 1;
    text-align: center;
}

.roundright {
    font-size: 14px;
    color: #E7135D;
    display: flex;
    align-items: center;
}

效果对比 #

• 当前效果：
  
• 期望效果：
  

解决思路 #

问题核心是a标签内部的flex布局没有合理分配空间。通过给标题元素添加flex: 1，让它占据左侧图标和右侧图标之间的所有剩余空间，这样右侧图标会被自动推到容器最右侧；同时给标题设置text-align: center，保证标题居中显示，完全匹配期望效果。

内容的提问来源于stack exchange，提问作者Gamers World