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>

Erweitern Sie das Snippet

http://jsfiddle.net/vqDK9/

html css flexbox

— 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

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>

Erweitern Sie das Snippet

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

Erweitern Sie das Snippet

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

Erweitern Sie das Snippet

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

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

Erweitern Sie das Snippet

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>

Erweitern Sie das Snippet

— 1,21 Gigawatt
quelle