如何使用Flexbox将一个项目向右对齐？

Question

如何使用Flexbox将一个项目向右对齐？

cssalignmentflexbox

419

https://jsfiddle.net/vhem8scs/

使用Flexbox是否可以使两个项目向左对齐，一个项目向右对齐？链接更清晰地展示了这一点。我想要实现的是最后一个示例。

在Flexbox中，我只有一个代码块。使用Float我有四个代码块。这也是我更喜欢Flexbox的原因之一。

HTML

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->

<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

CSS

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

- Jens Törnell

5

https://dev59.com/tlwY5IYBdhLWcg3wgX6V#33856609 - Michael Benjamin

7个回答

77

要使用简洁的、纯flexbox选项，将左对齐的项目和右对齐的项目分组：

<div class="wrap">
  <div>
    <span>One</span>
    <span>Two</span>
  </div>
  <div>Three</div>
</div>

并使用 space-between：

.wrap {
  display: flex;
  background: #ccc;
  justify-content: space-between;
}

这样你就可以将多个项目分组到右侧（或者只有一个）。

https://jsfiddle.net/c9mkewwv/3/

- spflow

1

这个代码是可以运行的，但是如果你不把每个组里面的元素改成 display: inline; 或者 display: inline-block;，那么它们就会被堆叠起来，而不是像Flexbox一样都在一排里。 - The DIMM Reaper

@TheDIMMReaper 我不确定我看到了什么问题。你能详细说明一下吗？ - spflow

我指的是您如何立即将“One”和“Two”标签从div更改为span - 如果它们仍然是display:block;，则它们将流到单独的行。由于OP最初使用的是div，因此我只想指出，仅将它们放在另一个div中是行不通的，除非更改原始标记的显示方式。 - The DIMM Reaper

1

是的，由于元素现在降了一个层级，display: flex 不再影响它们的布局。如果您想使用 div，是的，inline 或 inline-block 将起作用。但也可以使用 flex，因为我们已经在父 div 中使用了默认的 flex-direction: row。例如 https://jsfiddle.net/ynbb5964/2/ - spflow

谢谢，我尝试了align-self: flex-end，但为什么它不起作用呢？ - Anand

哦，好的，刚刚发现align-self只在交叉轴上起作用。 - Anand

9

将一些元素（headerElement）居中，而将最后一个元素放到右边（headerEnd）。

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}

- Satvik Vats

8

你可以选择任何一种方式

margin-left: auto;

或者

position absolute;
right: 0px;

这将把项目移动到右侧。您提供的像素值将使项目从右向左推动。

- raoul baddawi

3

你好@raoul。谢谢回答，但问题是关于 flexbox 的。请认真阅读问题的标题。 - Manticore

0

你应该能够在单个项目上使用"align-self"来覆盖容器的"align-items"状态。

- Ben

0

对于将其项目居中并希望将最后一个项目放置在右侧的人来说，这里有一个解决方案：

将header设置为flex，并将justify-content设置为centered
创建三个容器，其中第一个和最后一个使用margin: auto;
使用中间的容器来放置居中的项目
对于最后一个项目，将其放置在右侧容器中，并将其属性设置为margin-left: auto;

- user22593092

1

展示代码的最佳方式是直接编写。您应该添加一个代码块。 - undefined

-3

这是我所做的（使用Tailwind，但它只是CSS）：

<nav class="border-b border-black flex">
  <div class="border border-red-600 w-12">Back</div>
  <div class="border border-blue-600 w-12">Logo</div>
  <div class="border border-green-600 flex-grow text-center">Socializus</div>
  <div class="border border-orange-600 w-24">
    <div class="w-12 ml-auto border border-pink-600">Menu</div>
  </div>
</nav>

这个想法是左右两部分宽度相同，然后右侧的一个子部分占用较少的空间

- Dorian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Danield · Accepted Answer

要将一个flex子元素对齐到右侧，请使用margin-left:auto;属性。

根据flex规范的描述：

在主轴上使用自动外边距的一种用途是将弹性项目分成不同的“组”。以下示例显示如何使用它来重现常见的UI模式 - 单个操作栏，其中一些对齐在左侧，而其他一些对齐在右侧。

.wrap div:last-child {
  margin-left: auto;
}

更新的演示

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

注意：

您可以通过在中间的弹性项上设置flex-grow:1（或缩写为flex:1）来实现类似的效果，这将使最后一项被推到最右边。（演示）

然而，明显的区别是中间项变得比它需要的更大。添加边框到弹性项来看看差异。

演示

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div {
  border: 3px solid tomato;
}
.margin div:last-child {
  margin-left: auto;
}
.grow div:nth-child(2) {
  flex: 1;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

<div class="wrap margin">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div class="wrap grow">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>