CSS sejajarkan satu item tepat dengan flexbox

https://jsfiddle.net/vhem8scs/

Apakah mungkin untuk memiliki dua item sejajar kiri dan satu item lurus kanan dengan flexbox? Tautan menunjukkannya dengan lebih jelas. Contoh terakhir adalah apa yang ingin saya capai.

Di flexbox saya punya satu blok kode. Dengan float, saya memiliki empat blok kode. Itulah salah satu alasan mengapa saya lebih suka 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;
}

Untuk menyelaraskan satu anak flex ke kanan atur denganmargin-left: auto;

Dari spec fleksibel :

Salah satu penggunaan margin otomatis pada poros utama adalah memisahkan item fleksibel menjadi "grup" berbeda. Contoh berikut menunjukkan cara menggunakan ini untuk mereproduksi pola UI umum - satu bar tindakan dengan beberapa selaras di sebelah kiri dan yang lainnya selaras di sebelah kanan.

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

Biola diperbarui

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

catatan:

Anda dapat mencapai efek yang sama dengan mengatur pertumbuhan fleksibel: 1 pada item flex tengah (atau steno flex:1) yang akan mendorong item terakhir sampai ke kanan. ( Demo )

Namun perbedaan yang jelas adalah bahwa item tengah menjadi lebih besar dari yang seharusnya. Tambahkan perbatasan ke item fleksibel untuk melihat perbedaannya.

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>

Untuk opsi kotak fleksibel murni, kelompokkan item rata kiri dan kanan kanan:

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

dan gunakan space-between:

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

Dengan cara ini Anda dapat mengelompokkan beberapa item ke kanan (atau hanya satu).

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

Untuk menyelaraskan beberapa elemen (headerElement) di tengah dan elemen terakhir ke kanan (headerEnd).

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