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>来连接一行，整个列表位于＆＃34;端＆＃34;或包含<footer>的右边。

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

Answer 1

以下是code。您可以使用justify-content: flex-end;，以便Flex内容与右侧对齐

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

以下是必要的CSS：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

为此您可以使用以下属性

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

如何使用flexbox将项目对齐？

3 个答案: