Wie kann ich das Flex-Element nach rechts ausrichten?

680

Gibt es eine flexiblere Möglichkeit, "Kontakt" nach rechts auszurichten, als sie zu verwenden 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/

Mark Boulder
quelle
2
Sie können float richtig verwenden, aber es ist der gleiche Weg ...! Am besten verwenden Sie eine Anzeigetabelle mit Textausrichtung.
Yohann Tilotti
Klar, wenn das besser ist. Ich habe
Mark Boulder
2
Ich habe deine Geige aktualisiert jsfiddle.net/vqDK9/2
Yohann Tilotti
Hier sind mindestens zwei Möglichkeiten, dies zu tun: stackoverflow.com/a/33856609/3597276
Michael Benjamin

Antworten:

452

Bitte schön. Stellen Sie justify-content: space-betweenauf den flexiblen Behälter.

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

Kevin Suttle
quelle
291
Oderjustify-content: flex-end
BT
1
Versuchen Sie, die Breite von .c auf 300px einzustellen. Der Titel ist nicht mehr zentriert. Also ja, das beantwortet die Frage, aber das bricht das Design.
Agamemnus
22
Beachten Sie, dass dies nicht immer so funktioniert, wie Sie es erwarten, beispielsweise wenn ein .c::afterPseudoelement vorhanden ist. Nach meiner Erfahrung margin-left: auto;ist der Weg zu gehen.
Will
13
Oderflex-flow: row-reverse;
jchook
8
Ich sehe dies nicht als richtige Antwort, wenn Sie nicht nur ein Element in einem Flex-Container ausrichten möchten.
Foxhoundn
1096

Ein flexiblerer Ansatz wäre die Verwendung eines autolinken Randes (Flex-Elemente behandeln automatische Ränder etwas anders als in einem Blockformatierungskontext).

.c {
    margin-left: auto;
}

Geige aktualisiert:

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

treiben
quelle
2
Vielen Dank. Würden Sie dies persönlich der obigen Anzeigetabellenmethode von Yohann Tilotti vorziehen? Wenn ja warum?
Mark Boulder
4
@ MarkBoulder: Aus Kompatibilitätsgründen ist seine Methode besser, aber wenn Sie bereits Flexbox verwenden, wäre meine Antwort sinnvoller.
treiben
4
@ MarkBoulder: In diesem Fall erreichen beide dasselbe. Der Vorteil wäre, mit anderen Eigenschaften (und Verhalten) , die mit Flex Artikeln , dass die Tabelle Ansatz muss nicht ( flex, orderusw.).
treiben
3
Wenn Sie die Elemente nicht umbrechen können und die letzten drei nach rechts schweben müssen, zielen Sie nur mit diesem margin-left: auto;Stil auf das dritte vom letzten .
Daniel Sokolowski
2
@ Justin hat es herausgefunden, keine Notwendigkeit, sie einzuwickeln - ich konnte in meinem Fall nicht. Die Lösung bestand darin, den 1. der drei Punkte nur mit anzuvisieren margin-left: auto;.
Daniel Sokolowski
41

Wenn Sie hierfür die Flexbox verwenden möchten, sollten Sie in der Lage sein, dies zu tun ( display: flexauf dem Container, flex: 1auf den Artikeln und text-align: rightauf .c):

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

... oder alternativ (noch einfacher), wenn die Elemente nicht übereinstimmen müssen, können Sie sie justify-content: space-betweenauf dem Container verwenden und die text-alignRegeln vollständig entfernen :

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

Hier ist eine Demo zu Codepen, mit der Sie die oben genannten Schritte schnell ausprobieren können.

Nick F.
quelle
2
space-betweenwar genau das, wonach ich gesucht habe, danke!
Eddie Fletcher
Grenzen verschwinden bei Verwendung des zweiten Vorschlags, erwartetes Verhalten? codepen.io/oshihirii/pen/RygKRd
user1063287
38

Sie können auch einen Füllstoff verwenden, um den verbleibenden Raum zu füllen.

<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;
}

Ich habe die Lösung mit 3 verschiedenen Versionen aktualisiert. Dies liegt an der Diskussion der Gültigkeit der Verwendung eines zusätzlichen Füllelements. Wenn Sie den abgeschnittenen Code ausführen, sehen Sie, dass alle Lösungen unterschiedliche Funktionen haben. Wenn Sie beispielsweise die Füllklasse für Element b festlegen, füllt dieses Element den verbleibenden Platz aus. Dies hat den Vorteil, dass es keinen "toten" Bereich gibt, auf den nicht geklickt werden kann.

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

Arno
quelle
3
Endlich jemand, der Flexbox versteht
Kokodoko
9
@ Kokodoko Ja, die Verwendung eines weiteren nicht-semantischen HTML-Elements zum Verschieben eines anderen Elements ist das Beste, um Flexbox zu verstehen ...
Zanshin13
@ Zanshin13 Die anderen Antworten schreiben alle so viel zusätzliches CSS, dass Sie den Flex-Container genauso gut
weglassen
2
@ Kokodoko justify-content: space-betweenist "so viel" CSS, im Ernst? Keine weiteren Kommentare erforderlich (aber wenn Sie möchten - willkommen zum Chatten). Diese Antwort hat sein Recht , hier zu sein, denn es ist eine Lösung. Aber definitiv nicht optimal. Idk, vielleicht haben Sie es nicht bemerkt, aber die meisten CSS von anderen Antworten sind OPs und Antworten reduzieren tatsächlich (ein wenig) die Anzahl der CSS des Autors. Diese Antwort hat nicht weniger CSS als andere (funktioniert nicht ohne die CSS von OP - jsfiddle.net/63ma3b56 ). Aber es hat noch ein HTML-Element.
Zanshin13
32

Oder Sie könnten einfach verwenden justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }
Melchia
quelle
3
Das justify-contentAttribut ist ein Attribut des Flex-Containers, siehe Chris Coyers Flexy-Cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox
Klaas van der Weij
1
Dies ist die einzige Lösung auf dieser Seite, die für mich funktioniert hat.
user2847376
19

So leicht wie

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

Fügen Sie Ihrem Stylesheet die folgende CSS-Klasse hinzu:

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

Platzieren Sie ein leeres Element zwischen dem Element links und dem Element, das Sie rechts ausrichten möchten:

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

andreisrob
quelle
Für diejenigen, die nicht nur ein einzelnes Element nach rechts ausrichten möchten, sondern möglicherweise ein Element nach links und ein anderes nach rechts ausrichten möchten (innerhalb desselben Flex-Layouts), ist dies der richtige Weg!
Sensei James
8

Wenn Sie ein Element linksbündig ausrichten müssen (wie eine Kopfzeile), dann aber mehrere Elemente rechtsbündig ausrichten möchten (wie 3 Bilder), würden Sie Folgendes tun:

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
}

So wird das aussehen (nur relaventes CSS war im obigen Snippet enthalten)

Geben Sie hier die Bildbeschreibung ein

TetraDev
quelle
6

'Inhalt rechtfertigen: Flex-End' arbeitete innerhalb des Preisbox-Containers.

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

Ich finde, dass das Hinzufügen von "Rechtfertigungsinhalt: Flex-Ende" zum Flex-Container das Problem löst, während "Rechtfertigungsinhalt: Leerzeichen zwischen" nichts bewirkt.

Nächte
quelle
2

Verwenden Sie für Benutzer von Angular und Flex-Layout Folgendes für den Flex-Item-Container:

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

Siehe fxLayoutAlign-Dokumente hier und die vollständigen fxLayout-Dokumente hier .

Lindauson
quelle
0

Beispielcode basierend auf der Antwort von TetraDev

Bilder rechts:

* {
  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>

Bilder links:

* {
  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>

1,21 Gigawatt
quelle