To align one flex child to the right set it with margin-left: auto;
From the flex spec:
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.

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

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>

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

您可以执行以下任一操作

margin-left: auto;

或

position absolute;
right: 0px;

这会将项目移到右边。你给的px值会将项目从右边推到左边。

下面是我所做的（使用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>

其思想是左右两个部分的宽度相同，则右侧的子部分占用的空间较小