如何将Flex布局导航栏的最后一个子元素对齐到最右侧？

需求：实现导航栏内前两个链接（Home、About Us）均匀分布，Contact链接完全对齐到最右侧。

原始HTML代码 #

<nav class="mainAddressBar">
    <ul class='navLinks'>
        <li class="navItem"><a href="index.html">Home</a></li>
        <li class="navItem"><a href="about.html">About Us</a></li>
        <!--<li class="navItem"><a href="portfolio.html">Portfolio</a></li>-->
        <li class="navItem"><a href="contact.html">Contact</a></li>
    </ul>
</nav>

原始CSS代码 #

.navLinks {
    display: flex;
    justify-content: space-between;
    /*padding-left: 10em;*/
}

.navItem {
    flex: 1;
}

.navItem:last-child{
    margin-left: auto;
}

问题分析 #

当前代码中justify-content: space-between与flex:1、margin-left:auto的属性组合存在冲突，导致Contact无法完全贴靠右侧；同时ul默认的内边距和列表样式也会干扰布局效果。

修改后的CSS代码 #

.navLinks {
    display: flex;
    padding: 0; /* 移除ul默认内边距 */
    list-style: none; /* 去掉默认列表圆点 */
    width: 100%; /* 确保导航栏占满父容器宽度 */
}

.navItem:not(:last-child) {
    flex: 1; /* 前两个链接平分可用空间 */
    text-align: center; /* 文字居中，视觉上更均匀 */
}

.navItem:last-child {
    margin-left: auto; /* 将Contact自动推至最右侧 */
}

效果说明 #

• 前两个.navItem通过flex:1平分导航栏的可用空间，实现均匀分布，配合text-align:center让文字居中，布局更规整；
• 最后一个.navItem利用margin-left:auto自动填充左侧剩余空间，直接贴靠导航栏最右侧；
• 移除ul默认的padding和list-style，避免默认样式破坏布局。

如果导航栏父容器.mainAddressBar存在自定义的padding或margin，需确保其宽度设置符合需求，避免影响最终对齐效果。

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