CSS将一个项目与flexbox对齐

https://jsfiddle.net/vhem8scs/

是否可以让两个项目与flexbox左对齐，而一个项目与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;
}

要将一个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项目（或简写flex:1）上设置flex-grow：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>

对于简洁的纯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/

将中心的某些元素（headerElement）和右边的最后一个元素（headerEnd）对齐。

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