CSS wyrównaj jeden element z Flexbox

https://jsfiddle.net/vhem8scs/

Czy możliwe jest, aby dwa elementy były wyrównane do lewej, a jeden do prawej z Flexbox? Link pokazuje to wyraźniej. Ostatni przykład jest tym, co chcę osiągnąć.

W Flexbox mam jeden blok kodu. Z float mam cztery bloki kodu. To jeden z powodów, dla których wolę 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;
}

Aby wyrównać jedno elastyczne dziecko w prawo, ustaw je za pomocąmargin-left: auto;

Z specyfikacji Flex :

Jednym z zastosowań automatycznych marginesów w głównej osi jest rozdzielenie elementów elastycznych na odrębne „grupy”. Poniższy przykład pokazuje, jak użyć tego do odtworzenia wspólnego wzorca interfejsu użytkownika - pojedynczego paska działań, z których niektóre są wyrównane do lewej, a inne wyrównane do prawej.

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

Zaktualizowano skrzypce

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

Uwaga:

Możesz osiągnąć podobny efekt, ustawiając Flex-Grow: 1 na środkowym elemencie Flex (lub stenografii flex:1), który popychałby ostatni przedmiot do końca w prawo. ( Demo )

Oczywista różnica polega jednak na tym, że środkowy element staje się większy, niż może być. Dodaj ramkę do elementów elastycznych, aby zobaczyć różnicę.

Próbny

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

Aby uzyskać zwięzłą, czystą opcję Flexbox, zgrupuj elementy wyrównane do lewej i elementy wyrównane do prawej:

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

i użyj space-between:

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

W ten sposób możesz grupować wiele elementów po prawej stronie (lub tylko jeden).

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

Aby wyrównać niektóre elementy (headerElement) na środku i ostatni element po prawej stronie (headerEnd).

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