CSS richtet ein Element rechts mit der Flexbox aus

https://jsfiddle.net/vhem8scs/

Ist es möglich, zwei Elemente links und ein Element rechts an der Flexbox auszurichten? Der Link zeigt es deutlicher. Das letzte Beispiel ist das, was ich erreichen möchte.

In der Flexbox habe ich einen Codeblock. Mit float habe ich vier Codeblöcke. Das ist ein Grund, warum ich Flexbox bevorzuge.

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

Um ein Flex-Kind nach rechts auszurichten, stellen Sie es mit einmargin-left: auto;

Aus der Flex-Spezifikation :

Eine Verwendung von automatischen Rändern in der Hauptachse besteht darin, Flex-Elemente in verschiedene "Gruppen" zu unterteilen. Das folgende Beispiel zeigt, wie Sie damit ein allgemeines UI-Muster reproduzieren können - eine einzelne Aktionsleiste, von der einige links und andere rechts ausgerichtet sind.

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

Geige aktualisiert

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

Hinweis:

Sie können einen ähnlichen Effekt erzielen, indem Sie Flex-Grow einstellen: 1 für das mittlere Flex-Element (oder die Kurzschrift flex:1), wodurch das letzte Element ganz nach rechts verschoben wird. ( Demo )

Der offensichtliche Unterschied besteht jedoch darin, dass das mittlere Element größer wird, als es möglicherweise sein muss. Fügen Sie den Flex-Elementen einen Rahmen hinzu, um den Unterschied zu erkennen.

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>

Gruppieren Sie für eine knappe, reine Flexbox-Option die linksbündigen und die rechtsbündigen Elemente:

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

und verwenden space-between:

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

Auf diese Weise können Sie mehrere Elemente rechts (oder nur eines) gruppieren.

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

Zum Ausrichten einiger Elemente (headerElement) in der Mitte und des letzten Elements rechts (headerEnd).

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