如何使用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>

使用浮点数,您可以float: left使用<li>元素,然后float: right将<ul>链接连接在一起,整个列表位于包含的"结尾"或最右侧<footer>.

你如何使用flexbox实现这一点,保持容器<footer>元素？

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>

Answer 2

您可以使用 justify-content: flex-end

以下是必要的CSS:

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

footer ul {
  justify-content: flex-end;
  list-style: none;
  display: flex;
}
footer ul li {
  padding: 0 10px;
}

<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>

Answer 3

为此，您可以使用以下属性

ul{
  flex-direction: flex-end;
  display: flex;
}