title: How can I align one item right with flexbox?
body: <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>