CSS 将一项与 flexbox 对齐

CSS align one item right with flexbox

提问by Jens T?rnell

https://jsfiddle.net/vhem8scs/

https://jsfiddle.net/vhem8scs/

Is it possible to have two items align left and one item align right with flexbox? The link shows it more clearly. The last example is what I want to achieve.

是否可以让两个项目左对齐，一个项目与 flexbox 右对齐？链接显示得更清楚。最后一个例子是我想要实现的。

In flexbox I have one block of code. With float I have four blocks of code. That is one reason why I prefer flexbox.

在 flexbox 中，我有一段代码。使用 float 我有四个代码块。这就是我更喜欢 flexbox 的原因之一。

HTML

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

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

回答by Danield

To align one flex child to the right set it withmargin-left: auto;

要将一个 flex child 与右侧对齐，请将其设置为margin-left: auto;

From the flex spec:

从flex 规范：

One use of auto margins in the main axis is to separate flex items into distinct "groups". The following example shows how to use this to reproduce a common UI pattern - a single bar of actions with some aligned on the left and others aligned on the right.

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

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

Updated fiddle

更新的小提琴

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

Note:

笔记：

You could achieve a similar effect by setting flex-grow:1 on the middle flex item (or shorthand flex:1) which would push the last item all the way to the right. (Demo)

您可以通过在中间的 flex 项目（或简写flex:1）上设置 flex-grow:1 来实现类似的效果，这会将最后一个项目一直推到右边。（演示）

The obvious difference however is that the middle item becomes bigger than it may need to be. Add a border to the flex items to see the difference.

然而，明显的区别是中间项目变得比它可能需要的更大。为 flex 项添加边框以查看差异。

Demo

演示

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

回答by spflow

For a terse, pure flexbox option, group the left-aligned items and the right-aligned items:

对于简洁的纯 flexbox 选项，将左对齐项目和右对齐项目分组：

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

and use space-between:

并使用space-between：

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

This way you can group multiple items to the right(or just one).

通过这种方式，您可以将多个项目（或仅一个）分组到右侧。

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

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

回答by Satvik Vats

To align some elements (headerElement) in the center and the last element to the right (headerEnd).

将一些元素 (headerElement) 居中对齐，最后一个元素向右对齐 (headerEnd)。

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