CSS вирівняє один елемент прямо за допомогою флекси

https://jsfiddle.net/vhem8scs/

Чи можливо два елементи вирівняти ліворуч і один елемент вирівняти праворуч за допомогою флекси? Посилання показує це більш чітко. Останній приклад - те, чого я хочу досягти.

У flexbox у мене є один блок коду. З float у мене є чотири блоки коду. Це одна з причин, чому я віддаю перевагу флексбоксу.

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;
}

Щоб вирівняти одну гнучку дитину праворуч, встановіть їїmargin-left: auto;

З гнучких характеристик :

Одне використання автоматичних полів на головній осі - це розділення гнучких елементів на окремі "групи". Наступний приклад показує, як використовувати це для відтворення загального шаблону інтерфейсу користувача - однієї смуги дій з деякими вирівнюваннями зліва та іншими вирівнюваннями праворуч.

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

Оновлена ​​скрипка

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

Примітка:

Ви можете домогтися аналогічного ефекту, встановивши флекс-ріст: 1 на середньому елементі згинання (або стенограмі flex:1), який підштовхує останній елемент до кінця праворуч. ( Демо )

Очевидною відмінністю є те, що середній елемент стає більшим, ніж може знадобитися. Додайте рамку до гнучких елементів, щоб побачити різницю.

Демо

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

Для короткої, чистої опції флешбоку згрупуйте елементи, що вирівнюються вліво, і елементи, що вирівнюються вправо:

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

і використовувати space-between:

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

Таким чином ви можете згрупувати кілька елементів праворуч (або лише один).

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

Вирівняти деякі елементи (headerElement) у центрі та останній елемент праворуч (headerEnd).

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