html - Flexbox 最后一项右对齐

Question

这个问题在这里已经有了答案:





In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?

(6 个回答)


去年关闭。




Link to codepen
我正在尝试对齐 copyright我的 ul 中的元素向右。列表配置为 display: inline-flex .奇怪的是，最后一项似乎根本没有移动。

nav {
  text-align: center;
  font-family: Helvetica;
  opacity: 0.8;
  background: #222222;
  position: absolute;
  bottom: 0;
  width: 100%;
}

nav li {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  font-size: 1em;
  margin-right: .625em;
}

#copyright {
  margin-left: auto;
}

<footer>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="disclaimer.html">Disclaimer</a></li>
      <li><a href="safety.html">Safety</a></li>
      <li><a href="privacy-policy.html">Privacy Policy</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li id="copyright">&copy; 2020 Copyright LLC</li>
    </ul>
  </nav>
</footer>

我的理解是 margin-left: auto应该将最后一个列表元素推到右边，实现我的目标。我在某处读到 margin-left: auto不适用于内联 flexbox，虽然我再也找不到那个链接来确认了。有人可以验证吗？

Answer 1

Display flex 将影响应用到它的元素的内部/子元素。您必须在 ul 上放置一个显示 flex，只有 flex 的子项才会使用边距自动定位。 强文本

nav {
  text-align: center;
  font-family: Helvetica;
  opacity: 0.8;
  background: #222222;
  position: absolute;
  bottom: 0;
  width: 100%;
}

nav ul {
  display: flex;
}

nav li {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  font-size: 1em;
  margin-right: .625em;
}

#copyright {
  margin-left: auto;
}

<footer>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="disclaimer.html">Disclaimer</a></li>
      <li><a href="safety.html">Safety</a></li>
      <li><a href="privacy-policy.html">Privacy Policy</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li id="copyright">&copy; 2020 Copyright LLC</li>
    </ul>
  </nav>
</footer>