Flexbox – Blocksatz links und rechts auf derselben Zeile
Lesezeit: 6 Minuten
Lage:
Ich habe eine einfache Navigationsleiste, die ich in Flexbox baue. Ich möchte einen Gegenstand nach links schweben lassen und die anderen rechts festhalten.
Normalerweise beinhalten Antworten nur schwebende Elemente links und rechts, aber angeblich ist es in Flexbox schlecht, Floats zu verwenden. Ich habe darüber nachgedacht, justify-content und flex-start und flex-end zu verwenden, aber das funktioniert nicht so gut.
Ich habe versucht, Flex-Start auf das erste Element und dann Flex-End auf die anderen anzuwenden, aber das hat nicht so gut funktioniert.
Lob und Dank an alle, die Flexbox-Kenntnisse haben und mir helfen können, den richtigen Weg zu zeigen, wie man mit dieser Situation umgeht. 🙂
Wenn Sie nur ein Element links und alle anderen rechts haben möchten, ist die einfachste Lösung die Verwendung justify-content:flex-end auf dem übergeordneten Element, um alle Elemente nach rechts zu verschieben und dann hinzuzufügen margin-right:auto zu dem Element, das Sie auf der linken Seite haben möchten
Super das sieht gut aus! Wenn wir es auf 2 Elemente erweitern, die nach links schweben, ist die Lösung viel kniffliger?
– Nick Pineda
31. Mai 2015 um 4:55 Uhr
Dies funktioniert nicht im IE v10. Versuchen Sie, die Linie zu entfernen justify-content:flex-end;es funktioniert dann in allen Browsern.
– Paskins Loe
9. Mai 2016 um 8:30 Uhr
Dies funktioniert nur in der bequemen Situation, in der Sie nur ein einziges Element am anderen Ende haben
– vsync
12. Oktober 2016 um 15:46 Uhr
@vsync Wenn Sie mit “Fernende” auf der linken Seite meinen, haben Sie absolut Recht. Das ist auch das allererste, was ich in meiner Antwort erwähne. Wenn Sie etwas anderes meinen, das ich verpasst habe: Bitte erklären Sie es, damit ich meine Antwort aktualisieren kann.
– mmbrutto
17. Oktober 2016 um 8:43 Uhr
Margin-Hacks oder Pseudo-Elemente sind nicht erforderlich.
Erstellen Sie einfach eine Unterteilung in Ihrem Flex-Container und lassen Sie den Flex-Container durch Leerzeichen rechtfertigen.
Innerhalb der ersten Abteilung platzierst du die Gegenstände, die links sein werden, und innerhalb der zweiten Abteilung platzierst du die Gegenstände, die rechts sein werden.
Hinzufügen width: 100%; zu nav.menu{.. wenn es bei dir nicht funktioniert (ich verwende <nav><div class="left"><a item1>..</div><div class="right"><a .item3>..</div></nav> Anstatt von <ul><li>...)
– Toni
4. März 2021 um 20:45 Uhr
Sie können ein Pseudo-Element an der richtigen Stelle einfügen und es so wachsen lassen, dass es den verfügbaren Platz ausfüllt.