How can I align one item right with flexbox?
<p><a href="https://jsfiddle.net/vhem8scs/" rel="noreferrer">https://jsfiddle.net/vhem8scs/</a></p>

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

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

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="wrap"&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
&lt;/div&gt;

&lt;!-- DESIRED RESULT --&gt;

&lt;div class="result"&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.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;
}
</code></pre>