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

Posted 2023-03-05

【中文标题】如何使用 flexbox 将项目右对齐？

【英文标题】：How to align items to right using flexbox?

【发布时间】：2018-02-06 10:56:59

【问题描述】：

我有这样的结构：

<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> 将链接放在一行中，整个列表位于“末尾”或包含 @987654326 的最右侧@。

你将如何使用 flexbox 来实现这一点，同时保留容器 <footer> 元素？

【问题讨论】：

为什么需要 flexbox 进行右对齐？你可以使用浮动属性吗？

请查看并评论任何答案，如果有不清楚或遗漏的地方，请告诉我们。如果不是，那么如果您能接受对您帮助最大的答案，那就太好了。

由于我没有得到任何回复，我删除了我的答案

【参考方案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>

【讨论】：

哪些浏览器支持它？我在 caniuse.com 上找不到 flex-end

@Stanislav 你检查这些链接developer.mozilla.org/en-US/docs/Web/CSS/justify-content, caniuse.com/?search=justify-content

@Stanislav 但是，如果您想在完全支持的浏览器中将项目向右对齐，您可以将text-align: right 用于父元素，display: inline-block 用于子元素。

【参考方案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>

【参考方案3】：

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

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

【讨论】：

flex-direction 属性没有值 flex-end。我相信你想使用类似justify-content的东西。