如何使弹性项目正确对齐？答案

【问题标题】：How to make flex items align right?如何使弹性项目正确对齐？
【发布时间】：2018-06-21 10:09:09
【问题描述】：

这是我克隆 Jobbatical.com 作为学习项目的一部分的摘录。忽略丢失的徽标。

我正在尝试使固定导航栏中的第二个无序列表（其列表项为登录、加入、代表公司）右对齐。我已经尝试过使用检查器工具的各种方法，并设置 margin-left: auto 但由于某种原因我无法让它工作。

https://codepen.io/jenlky/pen/RxyyEL?editors=1100

<nav class="navbar navbar-nav navbar-expand-md fixed-top bg-dark">
  <div class="container-fluid">
    <div class="fix-navbar d-none d-md-flex">
      <ul class="navbar-nav">
        <li>
          <a href="#" title="Jobbatical.com" alt="jobbatical.com" id="logo"><img src="jobbatical_logo_blue.svg"></a>
        </li>
        <li>
          <a href="#" alt="Find jobs">Find jobs</a>
        </li>
      </ul>
      <ul class="navbar-nav navbar-right">
        <li>
          <a href="#" alt="Login in">Log in</a>
        </li>
        <li>
          <a href="#" alt="Sign up!">Join</a>
        </li>
        <li class="btn btn-primary btn-sm" id="for-companies">
          <a href="#" alt="Looking to hire?" id="companies-link">for companies</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

/* doesnt work... */
.navbar-right {
    margin-left: auto !important;
}

li a:not(#companies-link) {
    line-height: 60px;
}

nav .navbar-nav > li > a {
    font-size: 13px;
    line-height: 35px;
    text-transform: uppercase;
    color: #1c75bc;
    padding: 33px 0 31px;
    margin: 0 18px;
    font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 700;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

nav .navbar-nav > li.btn > a {
    color: #fff;
    padding: 12px 4px 10px;
    position: relative;
    float: right;
    margin: 0 15px;
}

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您需要在这些 ul 弹性项目的父项上设置 flex: 1。

父项 (.fix-navbar) 也恰好是一个弹性项目。它是.container-fluid 的子代，具有display: flex。但是弹性项目不会自动获得全宽。

所以ul 弹性项目的父级正在收缩包装内容，当您应用margin-left: auto 时，它没有额外的空间可以工作。

因此，将flex: 1 设置为.fix-navbar。这使其具有父级的全宽，创造额外的空间，并使margin-left: auto 能够在子级上工作。

revised codepen

【讨论】：

这很有魅力，非常感谢。额外感谢您的详细解释。