CSS alinhar um item à direita com flexbox

https://jsfiddle.net/vhem8scs/

É possível alinhar dois itens à esquerda e um item à direita com o flexbox? O link mostra mais claramente. O último exemplo é o que eu quero alcançar.

No flexbox, tenho um bloco de código. Com float, tenho quatro blocos de código. Essa é uma das razões pelas quais eu prefiro o 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;
}

Para alinhar um filho flex à direita, configure-o commargin-left: auto;

A partir da especificação flex :

Um uso de margens automáticas no eixo principal é separar itens flexíveis em "grupos" distintos. O exemplo a seguir mostra como usar isso para reproduzir um padrão de interface do usuário comum - uma única barra de ações com algumas alinhadas à esquerda e outras alinhadas à direita.

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

Violino atualizado

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

Você pode obter um efeito semelhante definindo flex-grow: 1 no item flex do meio (ou taquigrafia flex:1), que empurraria o último item para a direita. ( Demo )

A diferença óbvia, porém, é que o item do meio se torna maior do que o necessário. Adicione uma borda aos itens flexíveis para ver a diferença.

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>

Para uma opção flexbox pura e concisa, agrupe os itens alinhados à esquerda e alinhados à direita:

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

e use space-between:

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

Dessa forma, você pode agrupar vários itens à direita (ou apenas um).

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

Para alinhar alguns elementos (headerElement) no centro e o último elemento à direita (headerEnd).

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