CSS выравнивает один элемент справа с помощью flexbox

https://jsfiddle.net/vhem8scs/

Возможно ли, чтобы два элемента выравнивались влево, а один элемент выравнивался вправо с помощью flexbox? Ссылка показывает это более четко. Последний пример - это то, чего я хочу достичь.

В flexbox У меня есть один блок кода. С float у меня есть четыре блока кода. Это одна из причин, почему я предпочитаю 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;
}

Ответы

Ответ 1

Чтобы выровнять один гибкий диск справа, установите его с помощью margin-left: auto;

Из flex spec:

Одно использование автоматических полей на главной оси состоит в том, чтобы отделить элементы гибкости в отдельные "группы". В следующем примере показано, как использовать это для воспроизвести общий шаблон пользовательского интерфейса - один бар действий с некоторыми выровненные слева и другие, расположенные справа.

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

Ответ 2

Для краткой, чистой flexbox опции группируйте элементы с выравниванием по левому краю и выровненные по правому краю элементы:

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