为何给item1设置margin-right:auto无法让item2和item3居右？

我尝试给带有item1类的元素设置margin-right:auto，期望能让item2和item3类元素完全靠右，但该设置未生效。这些元素已设置display:block且指定了width属性，请问原因是什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.min.css">
</head>

<body>

<header class="header">
    <div class="container">
        <nav class="nav">
            <ul class="nav__inner"> 
                <li class="nav-item"><a href="#" class="nav-link-item item1">social</a></li>
                <li class="nav-item"><a href="#" class="nav-link-item item2">logo</a></li>
                <li class="nav-item"><a href="#" class="nav-link-item item3">about</a></li>
            </ul>
        </nav>
    </div>
</header>


<style>
        

    html{
        font-size: 10px;
        font-family: 'Montserrat', sans-serif;
        background-color: #121212;
        box-sizing: border-box;
    }

    a{
        text-decoration: none;
    }

    ul{
        list-style: none;
    }

    .container{
        width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .nav__inner{
        height: 11.5rem;
        display: flex;
        justify-content: space-between;
        width: 1100px;
        align-items: center;
    }

    .nav-link-item{
        font-size: 2rem;
        color: white;
        display: block;
    }

    .item1{
        margin-right: auto;
    }


</style>

</body>
</html>

问题原因 #

1. 父元素的justify-content: space-between干扰
   父容器.nav__inner设置了justify-content: space-between，这个属性会强制在所有flex子项（三个<li>）之间平均分配剩余空间，直接覆盖了margin-right:auto分配剩余空间的逻辑，导致设置失效。

2. margin-right:auto加错了层级
   flex布局中，margin:auto的作用对象是flex子项，但.item1是加在<a>标签上的，<a>并不是.nav__inner的直接子项，它的父元素<li>才是真正的flex子项，所以这个margin没有作用到正确的层级上。

解决方法 #

步骤1：移除父容器的justify-content: space-between

删掉.nav__inner里的justify-content: space-between，让margin:auto控制剩余空间分配。

步骤2：给正确的flex子项设置margin-right:auto

把margin-right:auto加到第一个<li>上，两种实现方式：

• 给第一个<li>单独加类：

  <li class="nav-item item1-li"><a href="#" class="nav-link-item item1">social</a></li>
  

  .item1-li {
      margin-right: auto;
  }
  

• 直接用CSS选择器选中第一个子项：

  .nav-item:first-child {
      margin-right: auto;
  }
  

修改后的完整CSS片段

.nav__inner{
    height: 11.5rem;
    display: flex;
    /* 移除justify-content: space-between */
    width: 1100px;
    align-items: center;
}

.nav-link-item{
    font-size: 2rem;
    color: white;
    display: block;
}

/* 给第一个flex子项设置margin-right:auto */
.nav-item:first-child {
    margin-right: auto;
}

修改后，第一个<li>会把剩余空间全部挤到自身右侧，item2和item3就会自动靠右对齐。

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