如何使用 flexbox 将项目右对齐？

Question

我有这样的结构：

 <footer>
    <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
    </ul>
</footer>

With floats, you could float: left the <li> elements and then float: right the <ul> to have the links in a row and the entire list at包含 <footer> 的“结束”或最右边。

您将如何使用 flexbox 完成此操作，同时保留容器 <footer> 元素？

原文由 user1087973 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

检查下面的 code 。您可以使用 justify-content: flex-end; 使 flex 内容向右对齐

 footer ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
}

 <footer>
  <ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
  </ul>
</footer>

原文由 bellabelle 发布，翻译遵循 CC BY-SA 4.0 许可协议