I CSS allineano un elemento a destra con flexbox

https://jsfiddle.net/vhem8scs/

È possibile allineare due elementi a sinistra e uno allineato a destra con flexbox? Il link lo mostra più chiaramente. L'ultimo esempio è quello che voglio ottenere.

Nel flexbox ho un blocco di codice. Con float ho quattro blocchi di codice. Questo è uno dei motivi per cui preferisco 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;
}

Per allineare un bambino flessibile a destra, impostalo conmargin-left: auto;

Dalle specifiche flex :

Un uso dei margini automatici nell'asse principale consiste nel separare gli elementi flessibili in "gruppi" distinti. L'esempio seguente mostra come utilizzarlo per riprodurre un modello di interfaccia utente comune: una singola barra di azioni con alcune allineate a sinistra e altre allineate a destra.

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

Violino aggiornato

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

Nota:

È possibile ottenere un effetto simile impostando flex-grow: 1 sull'elemento flex centrale (o stenografia flex:1) che spingerebbe l'ultimo elemento completamente a destra. ( Demo )

L'ovvia differenza è che l'elemento centrale diventa più grande di quanto potrebbe essere necessario. Aggiungi un bordo agli elementi flessibili per vedere la differenza.

dimostrazione

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

Per un'opzione flessibile e pura, raggruppa gli oggetti allineati a sinistra e quelli allineati a destra:

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

e usa space-between:

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

In questo modo puoi raggruppare più elementi a destra (o solo uno).

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

Per allineare alcuni elementi (headerElement) al centro e l'ultimo elemento a destra (headerEnd).

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