Comment aligner un élément flexible à droite?

Existe-t-il un moyen plus flexible pour aligner à droite "Contact" que pour l'utiliser position: absolute?

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>

http://jsfiddle.net/vqDK9/

Voici. Placez justify-content: space-betweensur le conteneur flexible.

.main { 
    display: flex; 
    justify-content: space-between;
  }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
<!--     <div class="b"><a href="#">Some title centered</a></div> -->
    <div class="c"><a href="#">Contact</a></div>
</div>

Une approche plus flexible consisterait à utiliser une automarge gauche (les éléments flex traitent les marges automatiques un peu différemment que lorsqu'ils sont utilisés dans un contexte de mise en forme de bloc).

.c {
    margin-left: auto;
}

Violon mis à jour:

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

Si vous souhaitez utiliser FlexBox pour cela, vous devriez être en mesure, en faisant cela ( display: flexsur le conteneur, flex: 1sur les articles et text-align: rightsur .c):

.main { display: flex; }
.a, .b, .c {
    background: #efefef;
    border: 1px solid #999;
    flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

... ou alternativement (encore plus simple), si les articles n'ont pas besoin de se rencontrer, vous pouvez utiliser justify-content: space-betweensur le conteneur et supprimer text-aligncomplètement les règles:

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

Voici une démo sur Codepen pour vous permettre d'essayer rapidement ce qui précède.

Vous pouvez également utiliser un remplissage pour remplir l'espace restant.

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

.filler{
    flex-grow: 1;
}

J'ai mis à jour la solution avec 3 versions différentes. Ceci en raison de la discussion sur la validité de l'utilisation d'un élément de remplissage supplémentaire. Si vous exécutez le code coupé, vous voyez que toutes les solutions font des choses différentes. Par exemple, si vous définissez la classe de remplissage sur l'élément b, cet élément remplira l'espace restant. Cela a l'avantage qu'il n'y a pas d'espace «mort» qui n'est pas cliquable.

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="filler b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>



<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>

Ou vous pouvez simplement utiliser justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }

Aussi facile que

.main {
    display: flex;
    flex-direction:row-reverse;
}

Ajoutez la classe CSS suivante à votre feuille de style:

.my-spacer {
    flex: 1 1 auto;
}

Placez un élément vide entre l'élément de gauche et l'élément que vous souhaitez aligner à droite:

<span class="my-spacer"></span>

Si vous avez besoin d'un élément à aligner à gauche (comme un en-tête) mais de plusieurs éléments à droite (comme 3 images), alors vous feriez quelque chose comme ceci:

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

Voici à quoi cela ressemblera (seul le CSS relavent a été inclus dans l'extrait ci-dessus)

'justification-contenu: flex-end' fonctionnait dans le conteneur de la boîte de prix.

.price-box {
    justify-content: flex-end;
}

Je trouve que l'ajout de «justifier-contenu: flex-end» au conteneur flex résout le problème tandis que «justifier-contenu: espace entre» ne fait rien.

Pour ceux qui utilisent Angular et Flex-Layout, utilisez ce qui suit sur le conteneur flex-item:

<div fxLayout="row" fxLayoutAlign="flex-end">

Voir les documents fxLayoutAlign ici et les documents fxLayout complets ici .

Exemple de code basé sur la réponse de TetraDev

Images à droite:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <h1>Secure Payment</h1>
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
</div>

Images à gauche:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
  text-align: right;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <h1>Secure Payment</h1>
</div>