Comment aligner à droite l’article Flex?

Existe-t-il un moyen plus flexible d’aligner à droite “Contact” que d’utiliser la position: absolute ?

http://jsfiddle.net/vqDK9/

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

Without title

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

Without title

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.

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

     

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)

entrer la description de l'image ici