Betrachten Sie die Hauptachse und die Querachse eines Flexcontainers:
Quelle: W3C
Zum Ausrichten von Flex-Elementen entlang der Hauptachse gibt es eine Eigenschaft:
Zum Ausrichten von Flex-Elementen entlang der Querachse gibt es drei Eigenschaften:
Im obigen Bild ist die Hauptachse horizontal und die Querachse vertikal. Dies sind die Standardrichtungen eines Flex-Containers.
Diese Richtungen können jedoch leicht mit der flex-direction
Eigenschaft ausgetauscht werden .
/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;
/* main axis is vertical, cross axis is horizontal */
flex-direction: column;
flex-direction: column-reverse;
(Die Querachse ist immer senkrecht zur Hauptachse.)
Mein Punkt bei der Beschreibung der Arbeit der Achsen ist, dass an beiden Richtungen nichts Besonderes zu sein scheint. Hauptachse, Querachse, beide sind gleich wichtig und flex-direction
erleichtern das Hin- und Herwechseln.
Warum erhält die Querachse zwei zusätzliche Ausrichtungseigenschaften?
Warum werden align-content
und werden align-items
für die Hauptachse eine Eigenschaft zusammengefasst?
Warum bekommt die Hauptachse keine justify-self
Eigenschaft?
Szenarien, in denen diese Eigenschaften nützlich wären:
Platzieren eines Flex-Elements in der Ecke des Flex-Containers
#box3 { align-self: flex-end; justify-self: flex-end; }
Ausrichten einer Gruppe von Flex-Elementen nach rechts ausrichten (
justify-content: flex-end
), aber Ausrichten des ersten Elements nach links ausrichten (justify-self: flex-start
)Stellen Sie sich einen Kopfbereich mit einer Gruppe von Navigationselementen und einem Logo vor. Mit
justify-self
dem Logo links ausgerichtet werden könnte , während die nav Artikel ganz rechts, und das Ganze paßt glatt ( „verbiegt“) an verschiedenen Bildschirmgrößen bleiben.Befestigen Sie in einer Reihe von drei flexiblen Elementen das mittlere Element in der Mitte des Behälters (
justify-content: center
) und richten Sie die benachbarten Elemente an den Behälterkanten (justify-self: flex-start
undjustify-self: flex-end
) aus.Beachten Sie, dass Werte
space-around
undspace-between
aufjustify-content
Eigenschaft nicht das mittlere Element halten zentriert um den Behälter , wenn die benachbarten Elemente unterschiedliche Breiten aufweisen.
Zum jetzigen Zeitpunkt gibt es keine Erwähnung von justify-self
oder justify-items
in der Flexbox-Spezifikation .
Im CSS-Box-Ausrichtungsmodul , dem unvollendeten Vorschlag des W3C, einen gemeinsamen Satz von Ausrichtungseigenschaften für alle Boxmodelle festzulegen, gibt es jedoch Folgendes:
Quelle: W3C
Sie werden das bemerken justify-self
und justify-items
werden in Betracht gezogen ... aber nicht für Flexbox .
Abschließend möchte ich noch die Hauptfrage wiederholen:
Warum gibt es keine Eigenschaften "Elemente rechtfertigen" und "Selbst rechtfertigen"?
quelle
justify-self
, für einen Flex-Artikel zu arbeiten? Angenommen, Sie haben Elemente a, b, c, d mit zusätzlichem Platz, um sie zu verteilen, und der Flex-Container hat siejustify-content: space-between
, sodass sie wie | abcd | enden. Was würde es bedeuten, zBjustify-self: center
oder 'Rechtfertigung-Selbst: Flex-Ende' nur zu Punkt 'b' hinzuzufügen? Wo würdest du es erwarten? (Ich sehe einige Demos in einer der Antworten hier, aber ich sehe keinen klaren Weg, wie es im Allgemeinen funktionieren würde.)justify-content: flex-start
, also sind die Elemente am Anfang wie | abcd | überfüllt. Was würden Sie erwarten, wenn Sie dortjustify-self: [anything]
Element 'b'justify-self
, für einen Flex-Artikel zu arbeiten? Ich würde sagen, nicht so anders als dieauto
Ränder, die bereits bei flexiblen Elementen funktionieren. In Ihrem zweiten Beispieljustify-self: flex-end
würde Element d es an die äußerste Kante verschieben. Das an sich wäre ein großartiges Feature, dasauto
Margen bereits können. Ich habe eine Antwort mit einer Demonstration gepostet.justify-content
und Weise einbindet undjustify-self
spezifiziert, so dass Fälle mit Konflikten (wie die Szenarien, nach denen ich gefragt habe) sind klar und vernünftig definiert. Wie ich in meiner Antwort hier bemerkt habe, geht{justify|align}-self
es darum, Elemente in einem größeren Feld{justify|align}-self
auszurichten, dessen Größe unabhängig vom Wert ist - und es gibt kein solches Feld auf der Hauptachse, in das ein flexibles Element ausgerichtet werden kann.justify-self
und wie Siejustify-content
interagieren würden, wenn sie in Konflikt stehen (wie in den von mir beschriebenen Szenarien). Automatische Ränder interagieren einfach überhaupt nichtjustify-content
- sie stehlen den gesamten Packraum, bevorjustify-content
sie verwendet werden können. Auto-Ränder sind also kein gutes Analogon dafür, wie dies funktionieren würde.Antworten:
Methoden zum Ausrichten von Flex-Elementen entlang der Hauptachse
Wie in der Frage angegeben:
Die Frage lautet dann:
Eine Antwort könnte sein: Weil sie nicht notwendig sind.
Die Flexbox-Spezifikation bietet zwei Methoden zum Ausrichten von Flex-Elementen entlang der Hauptachse:
justify-content
Schlüsselworteigenschaft undauto
RänderInhalt rechtfertigen
Die
justify-content
Eigenschaft richtet Flex-Elemente entlang der Hauptachse des Flex-Containers aus.Es wird auf den Flex-Container angewendet, wirkt sich jedoch nur auf Flex-Elemente aus.
Es gibt fünf Ausrichtungsoptionen:
flex-start
~ Flex-Artikel werden am Anfang der Linie verpackt.flex-end
~ Flex-Artikel werden gegen Ende der Linie verpackt.center
~ Flex-Artikel werden zur Mitte der Linie gepackt.space-between
~ Flex-Elemente sind gleichmäßig verteilt, wobei das erste Element an einer Kante des Containers und das letzte Element an der gegenüberliegenden Kante ausgerichtet ist. Die Kanten der ersten und letzten Elemente verwendet , ist abhängig vonflex-direction
und Schreibmodus (ltr
oderrtl
).space-around
~ Wiespace-between
außer mit halbgroßen Zwischenräumen an beiden Enden.Automatische Ränder
Mit
auto
Rändern können flexible Elemente zentriert, beabstandet oder in Untergruppen gepackt werden.Im Gegensatz
justify-content
zu Flex-Containern werdenauto
Ränder für Flex-Elemente verwendet.Sie verbrauchen den gesamten freien Speicherplatz in der angegebenen Richtung.
Richten Sie die Gruppe der Flex-Elemente rechts, aber das erste Element links aus
Szenario aus der Frage:
Andere nützliche Szenarien:
Legen Sie einen flexiblen Gegenstand in die Ecke
Szenario aus der Frage:
Zentrieren Sie ein flexibles Element vertikal und horizontal
margin: auto
ist eine Alternative zujustify-content: center
undalign-items: center
.Anstelle dieses Codes auf dem Flex-Container:
Sie können dies für das Flex-Element verwenden:
Diese Alternative ist nützlich, wenn Sie ein flexibles Element zentrieren, das über den Container läuft .
Zentrieren Sie ein Flex-Element und zentrieren Sie ein zweites Flex-Element zwischen dem ersten und der Kante
Ein Flex-Container richtet Flex-Elemente aus, indem er freien Speicherplatz verteilt.
Um ein gleiches Gleichgewicht zu schaffen , so dass ein mittlerer Gegenstand mit einem einzelnen Gegenstand daneben im Behälter zentriert werden kann, muss ein Gegengewicht eingeführt werden.
In den folgenden Beispielen werden unsichtbare dritte Flex-Elemente (Felder 61 und 68) eingeführt, um die "echten" Elemente (Feld 63 und 66) auszugleichen.
Natürlich ist diese Methode semantisch nicht besonders gut.
Alternativ können Sie ein Pseudoelement anstelle eines tatsächlichen DOM-Elements verwenden. Oder Sie können die absolute Positionierung verwenden. Alle drei Methoden werden hier behandelt: Flex-Elemente zentrieren und unten ausrichten
HINWEIS: Die obigen Beispiele funktionieren - in Bezug auf die echte Zentrierung - nur, wenn die äußersten Elemente gleich hoch / breit sind. Wenn Flex-Elemente unterschiedlich lang sind, siehe nächstes Beispiel.
Zentrieren Sie ein flexibles Element, wenn benachbarte Elemente unterschiedlich groß sind
Szenario aus der Frage:
Wie bereits erwähnt,
flex-direction
kann das mittlere Element nicht wirklich zentriert werden , es sei denn, alle flexiblen Elemente haben die gleiche Breite oder Höhe (abhängig von ). Dieses Problem ist ein starkes Argument für einejustify-self
Eigenschaft (die natürlich für die Ausführung der Aufgabe entwickelt wurde).Code-Snippet anzeigen
Hier sind zwei Methoden zur Lösung dieses Problems:
Lösung 1: Absolute Positionierung
Die Flexbox-Spezifikation ermöglicht die absolute Positionierung von Flex-Elementen . Dadurch kann das mittlere Objekt unabhängig von der Größe seiner Geschwister perfekt zentriert werden.
Denken Sie daran, dass die Elemente wie alle absolut positionierten Elemente aus dem Dokumentenfluss entfernt werden . Dies bedeutet, dass sie keinen Platz im Container beanspruchen und ihre Geschwister überlappen können.
In den folgenden Beispielen ist das mittlere Element mit absoluter Positionierung zentriert und die äußeren Elemente bleiben im Fluss. Das gleiche Layout kann jedoch auch in umgekehrter Reihenfolge erzielt werden: Zentrieren Sie das mittlere Element mit
justify-content: center
den äußeren Elementen und positionieren Sie sie absolut.Lösung 2: Verschachtelte Flex-Container (keine absolute Positionierung)
So funktioniert das:
.container
) ist ein Flex-Container..box
) ist jetzt ein flexibles Element..box
Artikel wird angegeben,flex: 1
um den Containerraum gleichmäßig zu verteilen.justify-content: center
.span
Element ein zentriertes Flex-Element.auto
Ränder, um die äußerenspan
s nach links und rechts zu verschieben.Sie können auch ausschließlich auf Ränder verzichten
justify-content
und diese verwendenauto
.Aber
justify-content
können hier arbeiten , weil dieauto
Margen immer Vorrang haben. Aus der Spezifikation:Inhalt rechtfertigen: Raum gleich (Konzept)
Zurück zu
justify-content
einer Minute, hier ist eine Idee für eine weitere Option.space-same
~ Ein Hybrid ausspace-between
undspace-around
. Flex-Elemente haben einen gleichmäßigen Abstand (wiespace-between
), außer dass anstelle von Zwischenräumen halber Größe an beiden Enden (wiespace-around
) an beiden Enden Räume voller Größe vorhanden sind.Dieses Layout kann mit
::before
und::after
Pseudoelementen auf dem Flexcontainer erreicht werden.(Kredit: @oriol für den Code und @crl für das Etikett)
UPDATE: Browser haben mit der Implementierung begonnen
space-evenly
, wodurch das oben genannte erreicht wird. Weitere Informationen finden Sie in diesem Beitrag: Gleicher Abstand zwischen flexiblen ElementenPLAYGROUND (enthält Code für alle obigen Beispiele)
quelle
justify-content
und dieauto
Margen. Für die andere Seite der Medaille - die Querachse ,align-items
,align-self
undalign-content
- siehe diesen Beitrag: stackoverflow.com/q/42613359/3597276justify-self
Eigenschaft ...auto
Ränder sind hilfreich, aberjustify-self: center
ideal. Die Lösung des von Ihnen vorgestellten Problems besteht darin, unsichtbare doppelte Elemente auf der gegenüberliegenden Seite zu erstellen. Siehe meine Antwort hier: stackoverflow.com/q/38948102/3597276space-same
Konzept ist jetzt eine echte Sache. Es heißtspace-evenly
, wird aber derzeit nur von Firefox unterstützt: developer.mozilla.org/en-US/docs/Web/CSS/justify-contentspace-evenly
in anderen Antworten darüber geschrieben: stackoverflow.com/q/45134400/3597276space-evenly
wurde in Chrome 57-60 unterstützt, aber nur für Grid-Layout. Es war ein Fehler, der behoben wurde, und seit Chrome 61 wird er dort auch für Flexbox unterstützt. Es gibt auch die Möglichkeit, es ohne Pseudoelemente zu emulieren :.item { margin-right: auto } .item:first-child { margin-left: auto }
.Ich weiß, dass dies keine Antwort ist, aber ich möchte dazu beitragen, was es wert ist. Es wäre großartig, wenn sie
justify-self
für die Flexbox freigeben könnten, um sie wirklich flexibel zu machen.Ich bin davon überzeugt, dass es bei mehreren Elementen auf der Achse am logischsten
justify-self
ist, sich an den nächsten Nachbarn (oder Kanten) auszurichten, wie unten gezeigt.Ich hoffe wirklich, dass W3C dies zur Kenntnis nimmt und es zumindest in Betracht ziehen wird. =)
Auf diese Weise können Sie ein Element erhalten, das unabhängig von der Größe des linken und rechten Felds wirklich zentriert ist. Wenn eine der Boxen den Punkt der mittleren Box erreicht, wird sie einfach gedrückt, bis kein Platz mehr zum Verteilen vorhanden ist.
Die Leichtigkeit, fantastische Layouts zu erstellen, ist endlos. Schauen Sie sich dieses "komplexe" Beispiel an.
quelle
justify-self
undjustify-items
.auto
Margen sind kein vollständiger Ersatz fürjustify-self
. Ich habe meinen vorherigen Kommentar sorgfältig formuliert, indem ich sagte, dass dieauto
Ränder einige der Anwendungsfälle abdecken . Wie Sie bereits bemerkt haben, kann ein Element nicht zentriert werden, wenn benachbarte Elemente unterschiedliche Größen haben. Es bietet jedoch mehr Optionen zum Ausrichten von Flex-Elementen. Als ich anfing, etwas über Flexbox zu lernen, dachte ich, dassjustify-content
unsichtbare Abstandshalter der einzige Weg sind.Dies wurde in der Liste im www-Stil abgefragt, und Tab Atkins (Spezifikationseditor) gab eine Antwort, in der erklärt wurde, warum . Ich werde hier etwas näher darauf eingehen.
Nehmen wir zunächst an, unser Flex-Container ist einzeilig (
flex-wrap: nowrap
). In diesem Fall besteht eindeutig ein Ausrichtungsunterschied zwischen der Hauptachse und der Querachse. Auf der Hauptachse sind mehrere Elemente gestapelt, auf der Querachse jedoch nur ein Element. Es ist also sinnvoll, ein anpassbares "Element selbst ausrichten" auf der Querachse zu haben (da jedes Element einzeln ausgerichtet ist), während es auf der Hauptachse keinen Sinn ergibt (da dort das Elemente werden gemeinsam ausgerichtet).Für mehrzeilige Flexboxen gilt für jede "flexible Leitung" dieselbe Logik. In einer bestimmten Linie werden Elemente einzeln auf der Querachse ausgerichtet (da es auf der Querachse nur ein Element pro Zeile gibt) und nicht gemeinsam auf der Hauptachse.
Hier ist eine andere Möglichkeit , es zu formulieren: ja, alle von der
*-self
und*-content
Eigenschaften sind darüber , wie mehr Platz zu verteilen , um die Dinge. Der Hauptunterschied besteht jedoch darin, dass die*-self
Versionen für Fälle vorgesehen sind, in denen nur eine einzige Sache auf dieser Achse vorhanden ist , und die*-content
Versionen für Fälle, in denen möglicherweise viele Dinge auf dieser Achse vorhanden sind . Die Ein-gegen-Viel-Szenarien sind verschiedene Arten von Problemen, und daher stehen verschiedene Arten von Optionen zur Verfügung - zum Beispiel sind diespace-around
/space-between
-Werte für sinnvoll*-content
, aber nicht für*-self
.SO: In der Hauptachse einer Flexbox gibt es viele Dinge, um den Raum herum zu verteilen. Eine
*-content
Immobilie macht dort also Sinn, aber keine*-self
Immobilie.Im Gegensatz dazu haben wir auf der Querachse sowohl eine
*-self
als auch eine*-content
Eigenschaft. Einer bestimmt, wie der Raum um die vielen Flexlinien verteilt wird (align-content
), während der andere (align-self
) bestimmt, wie der Raum um einzelne Flexelemente auf der Querachse innerhalb einer bestimmten Flexlinie verteilt wird.(Ich ignoriere
*-items
Eigenschaften hier, da sie einfach Standardeinstellungen für festlegen*-self
.)quelle
justify-self
Problem auf einer Achse mit mehreren Elementen im Gegensatz zu einem Element sein kann. Ich hoffe jedoch wirklich, dass sie sich in einer Situation mit mehreren Elementenjustify-self
weiter damit befassen, wie sich dies verhalten würde , da es einige Situationen gibt, in denen dies wirklich nützlich sein könnte. Zum Beispiel ( stackoverflow.com/questions/32378953/… ).justify-self
.*-self
es um Fälle geht, in denen wir nur eine Sache ausrichten müssen, während*-content
es um Fälle geht, in denen wir viele Dinge ausrichten müssen. Macht das etwas klarer?auto
Ränder, die ebenfalls Teil der Spezifikation sind, die * Selbstausrichtung mit mehreren Elementen in der Zeile. Kein klarer Grund, warum Keyword-Eigenschaften dies ebenfalls nicht können.Ich weiß, dass hier keine Flexbox verwendet wird, aber für den einfachen Anwendungsfall von drei Elementen (eines links, eines in der Mitte, eines rechts) kann dies auf einfache Weise
display: grid
beim Elternteil,grid-area: 1/1/1/1;
bei den Kindern undjustify-self
zum Positionieren erreicht werden dieser Kinder.quelle
Ich habe gerade meine eigene Lösung für dieses Problem gefunden, oder zumindest mein Problem.
Ich benutzte
justify-content: space-around
stattjustify-content: space-between;
.Auf diese Weise bleiben die Endelemente oben und unten haften, und Sie können benutzerdefinierte Ränder festlegen, wenn Sie dies wünschen.
quelle