CSS aligner un élément à droite avec flexbox

https://jsfiddle.net/vhem8scs/

Est-il possible d'avoir deux éléments alignés à gauche et un élément aligné à droite avec flexbox? Le lien le montre plus clairement. Le dernier exemple est ce que je veux réaliser.

Dans flexbox, j'ai un bloc de code. Avec float, j'ai quatre blocs de code. C'est une des raisons pour lesquelles je préfère la 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;
}

Pour aligner un enfant flexible à droite, définissez-le avecmargin-left: auto;

De la spécification flex :

Une utilisation des marges automatiques dans l'axe principal consiste à séparer les éléments flexibles en "groupes" distincts. L'exemple suivant montre comment l'utiliser pour reproduire un modèle d'interface utilisateur commun - une seule barre d'actions avec certaines alignées à gauche et d'autres alignées à droite.

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

Violon mis à jour

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

Remarque:

Vous pouvez obtenir un effet similaire en définissant flex-grow: 1 sur l'élément flex central (ou raccourci flex:1 ), ce qui pousserait le dernier élément complètement vers la droite. ( Démo )

Cependant, la différence évidente est que l'élément du milieu devient plus gros qu'il ne devrait l'être. Ajoutez une bordure aux éléments flexibles pour voir la différence.

Démo

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

Pour une option Flexbox pure et concise, regroupez les éléments alignés à gauche et les éléments alignés à droite:

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

et utiliser space-between:

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

De cette façon, vous pouvez regrouper plusieurs éléments vers la droite (ou un seul).

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

Pour aligner certains éléments (headerElement) au centre et le dernier élément à droite (headerEnd).

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