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>
Antworten:
Bitte schön. Stellen Sie
justify-content: space-between
auf den flexiblen Behälter.quelle
justify-content: flex-end
.c::after
Pseudoelement vorhanden ist. Nach meiner Erfahrungmargin-left: auto;
ist der Weg zu gehen.flex-flow: row-reverse;
Ein flexiblerer Ansatz wäre die Verwendung eines
auto
linken Randes (Flex-Elemente behandeln automatische Ränder etwas anders als in einem Blockformatierungskontext).Geige aktualisiert:
quelle
flex
,order
usw.).margin-left: auto;
Stil auf das dritte vom letzten .margin-left: auto;
.Wenn Sie hierfür die Flexbox verwenden möchten, sollten Sie in der Lage sein, dies zu tun (
display: flex
auf dem Container,flex: 1
auf den Artikeln undtext-align: right
auf.c
):... oder alternativ (noch einfacher), wenn die Elemente nicht übereinstimmen müssen, können Sie sie
justify-content: space-between
auf dem Container verwenden und dietext-align
Regeln vollständig entfernen :Hier ist eine Demo zu Codepen, mit der Sie die oben genannten Schritte schnell ausprobieren können.
quelle
space-between
war genau das, wonach ich gesucht habe, danke!Sie können auch einen Füllstoff verwenden, um den verbleibenden Raum zu füllen.
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.
quelle
justify-content: space-between
ist "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.Oder Sie könnten einfach verwenden
justify-content: flex-end
quelle
justify-content
Attribut ist ein Attribut des Flex-Containers, siehe Chris Coyers Flexy-Cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexboxSo leicht wie
quelle
Fügen Sie Ihrem Stylesheet die folgende CSS-Klasse hinzu:
Platzieren Sie ein leeres Element zwischen dem Element links und dem Element, das Sie rechts ausrichten möchten:
<span class="my-spacer"></span>
quelle
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:
So wird das aussehen (nur relaventes CSS war im obigen Snippet enthalten)
quelle
'Inhalt rechtfertigen: Flex-End' arbeitete innerhalb des Preisbox-Containers.
quelle
Ich finde, dass das Hinzufügen von "Rechtfertigungsinhalt: Flex-Ende" zum Flex-Container das Problem löst, während "Rechtfertigungsinhalt: Leerzeichen zwischen" nichts bewirkt.
quelle
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 .
quelle
Beispielcode basierend auf der Antwort von TetraDev
Bilder rechts:
Bilder links:
quelle