web-dev-qa-db-fra.com

Comment aligner à droite l'élément flex?

Existe-t-il un moyen plus flexible d’aligner à droite le "Contact" plutôt que d’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/

htmlcsshtml5css3flexbox
560
Mark Boulder

Voici. Définissez justify-content: space-between sur 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>
366
Kevin Suttle

Une approche plus flexible consisterait à utiliser une marge gauche auto (traiter les éléments flex marges automatiques un peu différemment que 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;}
<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>
989
Adrift

Si vous voulez utiliser flexbox pour cela, vous devriez pouvoir: (display: flex sur le conteneur, flex: 1 sur les éléments et text-align: right sur .c):

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

... ou bien (encore plus simple), si les éléments ne doivent pas se rencontrer, vous pouvez utiliser justify-content: space-between sur le conteneur et supprimer complètement les règles 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.

33
Nick F

Vous pouvez également utiliser un remplisseur 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 extrait, vous constatez que toutes les solutions ont des effets différents. 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 ne soit 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>
31
Arno

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

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

Aussi facile que

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

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>

11
andreisrob

Si vous souhaitez qu'un élément soit aligné à gauche (comme un en-tête), mais que plusieurs éléments soient alignés à droite (comme 3 images), procédez comme suit:

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 (seuls les CSS pertinents ont été inclus dans l'extrait ci-dessus)

enter image description here

8
TetraDev

'justifier-contenu: flex-end' a travaillé dans le conteneur de la boîte de prix.

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

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

3
nights

Pour ceux qui utilisent Angular et Flex-Layout, utilisez les éléments suivants sur le conteneur flex-item:

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

Voir fxLayoutAlign docs ici et la documentation complète fxLayout ici .

2
Lindauson

Cette solution devrait fonctionner

.main{
    position: relative;
    display: -ms-flexbox;
    display: flex;
    vertical-align: middle;
}

.main .c{
margin-left: auto;
order: 2;
}
<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>
0
Monir

Exemple de code basé sur réponse par 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>
0
1.21 gigawatts