Voici. Définir le justify-content: space-between les conteneurs flexibles.

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

 
With title
 
 
Home
 
Some title centered
 
Contact
 
 
Without title
 
 
Home
  
Contact
  

Une approche plus souple consisterait à utiliser une marge auto (les éléments flexibles traitent les marges automatiques un peu différemment de celles utilisées dans un contexte de formatage 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;} 

 
With title
 
 
Home
 
Some title centered
 
Contact
 
 
Without title
 
 
Home
  
Contact
 
 
Problem
 
Is there a more flexbox-ish way to right align "Contact" than to use position absolute? 

Si vous voulez utiliser flexbox pour cela, vous devriez être capable de le faire ( display: flex sur le conteneur, flex: 1 sur les éléments et text-align: right on .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 éléments n’ont pas besoin de se rencontrer, vous pouvez utiliserJulice justify-content: space-between le conteneur et supprimer complètement les règles d’ text-align du text-align :

 .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 remplisseur pour remplir l’espace restant.

 
 
Home
 
Some title centered
 
 
Contact
 
 .filler{ flex-grow: 1; } 

J’ai mis à jour la solution avec 3 versions différentes. Cela en raison de la discussion de la validité de l’utilisation d’un élément de remplissage supplémentaire. Si vous exécutez le code, vous constaterez 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” non cliquable.

 
 
Home
 
Some title centered
 
 
Contact
 
 
 
Home
 
Some title centered
 
Contact
 
 
 
Home
 
Some title centered
 
Contact
 
  

Ou vous pourriez simplement utiliser un justify-content: flex-end

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

Aussi facile que

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

Si vous avez besoin d’un élément pour restr aligné (comme un en-tête), puis de plusieurs éléments alignés à 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 fiable a été inclus dans l’extrait de code ci-dessus)