Alles, was Sie über die Ausrichtung in Flexbox wissen müssen

Eine Reihe von Veröffentlichungen zu den Funktionen der Flexbox CSS-Technologie von Rachel Andrew.

1. Was passiert beim Erstellen eines Flexbox- Containers?

In diesem Artikel werden die Ausrichtungseigenschaften in Flexbox sowie die Grundregeln erläutert, anhand derer Sie sich daran erinnern können, wie die Ausrichtung sowohl auf der Haupt- als auch auf der Querachse funktioniert.

Im ersten Artikel dieser Reihe habe ich erklärt, was passiert, wenn display: flex für ein Element deklariert wird. Dieses Mal werden wir uns die Ausrichtungseigenschaften und ihre Funktionsweise mit Flexbox ansehen. Wenn Sie jemals verwirrt waren, wann Sie Alignment durchführen und wann Sie es rechtfertigen müssen , hoffe ich, dass dieser Artikel alle Fragen klärt!

Verlauf der Flexbox-Ausrichtung

In der gesamten Geschichte des CSS-Layouts schien mir die Fähigkeit, Elemente auf beiden Achsen korrekt auszurichten, wirklich das schwierigste Webdesign-Problem zu sein. Das heißt, Die Fähigkeit, Elemente und Elementgruppen korrekt auszurichten, war für viele von uns das aufregendste Merkmal von Flexbox, als es zum ersten Mal in Browsern angezeigt wurde. Die Ausrichtung wurde in CSS zu nur zwei Zeilen:

Die Ausrichtungseigenschaften, die als Flexbox- Ausrichtungseigenschaften betrachtet werden können , sind jetzt in der Box-Ausrichtungsspezifikation vollständig definiert. Es beschreibt, wie die Ausrichtung in verschiedenen Layoutkontexten funktioniert. Dies bedeutet, dass wir in CSS Grid dieselben Ausrichtungseigenschaften wie in Flexbox und in Zukunft sowie in anderen Layoutkontexten verwenden können. Daher wird jede neue Ausrichtungsoption für die Flexbox in der Box-Ausrichtungsspezifikation ausführlich beschrieben und nicht auf der nächsten Flexbox- Ebene.

Die Eigenschaften

Viele Leute sagen mir, dass sie Schwierigkeiten haben , sich daran zu erinnern, ob sie Eigenschaften verwenden sollen, die in Flexbox mit Align- oder mit Rechtfertigung beginnen . Es sollte daran erinnert werden, dass:

• Ausrichten richtet die Hauptachse aus. Ausrichtung in die gleiche Richtung wie Ihre Flex-Richtung;
• Ausrichten richtet die senkrechte Achse aus. Ausrichtung in Richtung senkrecht zur Flexrichtung.

Hier hilft es wirklich, aus der Sicht der Haupt- und Querachse zu denken, anstatt horizontal und vertikal. Es spielt keine Rolle, wohin die Achse physikalisch gerichtet ist.

Richten Sie die Hauptachse am Begründungsinhalt aus

Beginnen wir mit der Ausrichtung der Hauptachse. Die Ausrichtung auf der Hauptachse erfolgt mithilfe der Eigenschaft " Inhalt ausrichten". Diese Eigenschaft behandelt alle Flex-Elemente als Gruppe und steuert die Verteilung des Raums zwischen ihnen.

Der Anfangswert der Eigenschaft " Inhalt rechtfertigen" ist " Flex-Start" . Wenn Sie display: flex deklarieren display: flex alle Flex-Elemente am Anfang der Flex-Linie ausgerichtet. Wenn Ihre Flex-Richtung die Wertzeile (Linie) und die Richtung für die Eingabe des Textes der Sprache von links nach rechts wie Englisch hat, beginnen die Elemente von links.

Abb_1. Elemente richten sich von Anfang an aus.

Beachten Sie, dass die Eigenschaft " Inhalt rechtfertigen" nur Aktionen ausführen kann, wenn freier Speicherplatz für die Verteilung vorhanden ist. Wenn Ihr Satz von Flex-Elementen den gesamten Raum auf der Hauptachse einnimmt, ändert die Verwendung von Begründungsinhalten daher nichts.

Abb_2. Kein Platz für Umverteilung

Wenn wir der Eigenschaft " Rechtfertigungsinhalt" einen Flex-End- Wert zuweisen , werden alle Elemente an das Zeilenende verschoben. Der freie Speicherplatz befindet sich jetzt am Anfang.

Abb_3. Die Elemente stehen am Ende in einer Reihe.

Mit diesem Raum können wir andere Dinge tun. Wir könnten ihn bitten, unter Verwendung von justify-content: space-between zwischen unseren Flex-Elementen zu verteilen. In diesem Fall sind das erste und das letzte Element bündig mit den Enden des Containers und der gesamte Raum wird gleichmäßig auf die Elemente aufgeteilt.

Abb_4. Der freie Speicherplatz wird auf die Elemente verteilt

Wir können die Zuweisung von Speicherplatz um unsere Flex-Elemente mithilfe von justify-content: space-around anfordern justify-content: space-around . In diesem Fall wird der verfügbare Platz zugewiesen und auf jeder Seite der Elemente platziert.

Abb_5. Elemente haben jetzt Platz auf beiden Seiten von sich.

Der neueste Wert für die Eigenschaft " Rechtfertigungsinhalt" finden Sie in der Box-Ausrichtungsspezifikation . Es wird nicht in der Flexbox- Spezifikation angezeigt . Es ist platzgleichmäßig . In diesem Fall werden die Elemente gleichmäßig im Container verteilt, und der zusätzliche Raum befindet sich zwischen ihnen und auf beiden Seiten.

Abb_6. Elemente sind gleichmäßig verteilt.

Sie können mit allen Werten in einer Demo spielen:

Diese Werte funktionieren auf die gleiche Weise, wenn Ihre Flexrichtung eine Spalte ist. Möglicherweise haben Sie jedoch keinen zusätzlichen Platz für die Verteilung in der Spalte, es sei denn, Sie fügen dem Flex-Container die Höhe oder Größe des Blocks hinzu, wie in der folgenden Demo.

Richten Sie die senkrechte Achse am Ausrichtungsinhalt aus

Wenn Sie dem Flex- Container Flex-Wrap: Wrap hinzugefügt haben und mehrere Flex-Linien haben, können Sie die Flex-Linien mit der Eigenschaft align-content auf der Querachse ausrichten. Dies erfordert jedoch zusätzlichen Platz auf der Querachse. In der folgenden Demo verläuft meine Querachse in einer Blockrichtung, d. H. in der Spalte und ich setze die Containerhöhe auf 60vh. Da dies mehr als notwendig ist, um meine Flex-Artikel anzuzeigen, habe ich vertikalen freien Platz im Container.

Dann kann ich align-content mit einem der folgenden Werte verwenden:

Wenn meine Flex-Richtung eine Spalte ist, funktioniert der Align-Inhalt wie im folgenden Beispiel.

Wie beim Rechtfertigungsinhalt arbeiten wir mit Zeichenfolgen in einer Gruppe und weisen freien Speicherplatz zu.

Kurzform der Eigenschaft für Ortsinhalte

In der Box Alignment- Spezifikation finden wir eine abgekürzte Form der Eigenschaft place-content . Mit dieser Eigenschaft können Sie den Rechtfertigungsinhalt und den Ausrichtungsinhalt sofort festlegen. Der erste Parameter wird für den Ausrichtungsinhalt angegeben, der zweite für den Ausrichtungsinhalt . Wenn Sie nur einen Wert angegeben haben, wird dieser für beide Parameter festgelegt.

 .container { place-content: space-between stretch; } 

das gleiche wie:

 .container { align-content: space-between; justify-content: stretch; } 

Wenn Sie verwendet haben:

 .container { place-content: space-between; } 

dann ist es dasselbe wie:

 .container { align-content: space-between; justify-content: space-between; } 

Richten Sie die senkrechte Achse an den Ausrichtungselementen aus

Jetzt wissen wir, dass wir unseren Satz von Flexelementen oder unsere Flexlinien als Gruppe ausrichten können.

Es gibt jedoch eine andere Möglichkeit, unsere Elemente auszurichten - diese Ausrichtung der Elemente relativ zueinander auf der Querachse. Ihr Container ist groß. Diese Höhe könnte durch die Höhe des höchsten Elements wie in dieser Figur bestimmt werden.

Abb_7. Die Höhe des Behälters wird durch das dritte Element bestimmt

Stattdessen kann es definiert werden, indem dem Flex-Container eine Höhe hinzugefügt wird:

Abb_8. Die Höhe wird durch die Größe des Flexbehälters bestimmt.

Der Grund, warum Flex-Elemente auf die Größe des höchsten Elements gedehnt werden, liegt darin, dass der Anfangswert für den Parameter " Elemente ausrichten" "Dehnen" ist. Die Elemente werden entlang der Querachse gestreckt, um die Größe des Flexbehälters in dieser Richtung zu erhalten.

Beachten Sie, dass im Fall von Ausrichtungselementen der Wert betroffen ist. Wenn ein mehrzeiliger Flexcontainer vorhanden ist, fungiert jede Zeile als neuer Flexcontainer. Das höchste Element in dieser Zeile bestimmt die Größe aller Elemente in der Zeile.

Zusätzlich zum anfänglichen Dehnungswert können Sie Ausrichtungselemente auf Flex-Start setzen . In diesem Fall werden sie am Anfang des Containers ausgerichtet und nicht mehr in der Höhe gedehnt.

Abb_9. Elemente, die am Anfang der Querachse ausgerichtet sind

Der Flex-End- Wert verschiebt sie entlang der Querachse zum Ende des Containers.

Abb_10. Elemente, die am Ende der Querachse ausgerichtet sind

Wenn Sie den Mittelwert verwenden, werden alle Elemente gegeneinander zentriert:

Abb_11. Auf der Querachse zentrierte Elemente

Wir können auch die Grundlinienausrichtung durchführen. Dadurch wird sichergestellt, dass die Basislinien des Texts ausgerichtet sind und nicht die Ränder um den Inhalt.

Abb_12. Grundlinienausrichtung

Sie können diese Werte in der Demo ausprobieren:

Individuelle Ausrichtung mit Align-Self

Mit der Eigenschaft align-items können Sie die Ausrichtung aller Elemente gleichzeitig festlegen. Tatsächlich werden die Werte der Align-Self- Eigenschaft einzelner Flex-Elemente für die gesamte Gruppe festgelegt.

Sie können auch die Eigenschaft align-self eines einzelnen Flex-Elements verwenden, um es innerhalb der Flex-Linie mit anderen Flex-Elementen auszurichten.

Im folgenden Beispiel habe ich Align-Elemente im Container verwendet, um die Ausrichtung für die Gruppe in der Mitte festzulegen , aber auch Align-Self für das erste und das letzte Element verwendet, um ihren Ausrichtungswert zu ändern.

Warum gibt es keine Selbstnivellierung?

Oft stellt sich die Frage, warum es unmöglich ist, ein Element oder eine Gruppe von Elementen entlang der Hauptachse auszurichten. Warum gibt es in Flexbox keine Eigenschaft für die Ausrichtung auf der Hauptachse? Wenn Sie sich Rechtfertigungsinhalte und Ausrichtungsinhalte als Raumverteilung vorstellen, wird der Grund für die mangelnde Selbstoptimierung offensichtlicher. Wir behandeln Flex-Elemente als Gruppe und weisen den verfügbaren Platz auf bestimmte Weise zu - entweder am Anfang oder am Ende der Gruppe oder zwischen Elementen.

Wenn es auch nützlich sein kann, darüber nachzudenken, wie die Arbeit mit Inhalten und Ausrichtungsinhalten in einem CSS-Rasterlayout gerechtfertigt werden kann. In Grid werden diese Eigenschaften verwendet, um den freien Speicherplatz im Grid-Container auf Grid-Tracks zu verteilen. Wir nehmen die Tracks wieder als Gruppe und diese Eigenschaften geben uns die Möglichkeit, zusätzlichen Platz zwischen ihnen zu verteilen. Da wir in einer Gruppe sowohl im Grid als auch in der Flexbox agieren, können wir nicht alleine auf das Element zielen und etwas anderes damit machen. Es gibt jedoch eine Möglichkeit, die Art von Layout zu erreichen, nach der Sie fragen, wenn Sie nach einer Eigenschaft auf der Hauptachse fragen, nämlich automatische Felder zu verwenden.

Verwenden des automatischen Einrückens auf der Hauptachse

Wenn Sie jemals einen Block in CSS zentriert haben (z. B. einen Wrapper für den Inhalt der Hauptseite, indem Sie den Rand links und rechts in auto festlegen ), haben Sie bereits Erfahrung mit automatischen Feldern. Der auf Auto eingestellte Einzug versucht, in der eingestellten Richtung so groß wie möglich zu werden. Bei Verwendung der Einrückung zum Zentrieren des Blocks setzen wir sowohl links als auch rechts auf Auto . Jeder von ihnen versucht so viel Platz wie möglich einzunehmen und drückt daher unseren Block in die Mitte.

Das Einrücken funktioniert in Flexbox sehr gut, um einzelne Elemente oder Elementgruppen auf der Hauptachse auszurichten. Im folgenden Beispiel erreiche ich ein gemeinsames Entwurfsmuster. Ich habe eine Navigationsleiste mit Flexbox , die Elemente werden als Zeichenfolge angezeigt und verwenden den Anfangswert justify-content: start . Ich möchte, dass das letzte Element am Ende der Flex-Linie getrennt von den anderen angezeigt wird, vorausgesetzt, die Linie bietet ausreichend Platz dafür.

Ich ziele auf diesen Menüpunkt und gebe ihm automatisch den linken Rand . Dies bedeutet, dass das Feld versucht, so viel Platz wie möglich links neben dem Objekt zu haben und es ganz nach rechts zu schieben.

Wenn Sie die automatische Einrückung auf der Hauptachse verwenden, wird durch die Eigenschaft " Inhalt ausrichten" kein Effekt mehr erzeugt, da die automatische Einrückung den gesamten Speicherplatz einnimmt, der sonst mithilfe des Inhalts " Ausrichten" verteilt würde.

Fallback-Ausrichtung

Jede Ausrichtungsmethode beschreibt detailliert die Sicherungszuordnung. Dies geschieht, wenn die angeforderte Ausrichtung nicht erreicht werden kann. Wenn Sie beispielsweise nur ein Element in einem Flex-Container haben und einen Begründungsinhalt anfordern : Leerzeichen dazwischen , was soll passieren? Die Antwort ist, dass die Fallback-Ausrichtung den Flex-Start verwendet und ein Element am Anfang des Flex-Containers ausgerichtet wird. Im Fall von " Rechtfertigungsinhalt: Leerzeichen" wird die Sicherungsausrichtung in der Mitte verwendet.

In der aktuellen Spezifikation können Sie die Einstellungen für die Sicherungsausrichtung nicht ändern. Wenn Sie daher die Fallback-Option bevorzugen, dass der Zwischenraum das Zentrum anstelle des Flex-Starts ist , gibt es keine Möglichkeit, dies zu tun. In der Spezifikation ist jedoch ein Hinweis enthalten, der besagt, dass diese Funktion möglicherweise in zukünftigen Versionen enthalten ist.

Sichere und unsichere Ausrichtung

Neu in der Box Alignment- Spezifikation ist das Konzept der sicheren und unsicheren Ausrichtung mit sicheren und unsicheren Schlüsselwörtern.

Im folgenden Code ist das letzte Element zu breit für den Container. Bei unsicherer Ausrichtung und einem flexiblen Container auf der linken Seite wird das Element abgeschnitten, da der Überlauf über den Seitenrand hinausgeht.

 .container { display: flex; flex-direction: column; width: 100px; align-items: unsafe center; } .item:last-child { width: 200px; } 

Abb_13. Eine unsichere Ausrichtung liefert die erforderliche Ausrichtung, kann jedoch zu Datenverlust führen

Eine sichere Ausrichtung verhindert Datenverlust, indem der Überlauf auf die andere Seite verschoben wird.

 .container { display: flex; flex-direction: column; width: 100px; align-items: safe center; } .item:last-child { width: 200px; } 

Abb_14. Eine sichere Ausrichtung versucht, Datenverlust zu verhindern

Diese Schlüsselwörter haben derzeit nur eine eingeschränkte Browserunterstützung. Sie demonstrieren jedoch die Essenz des zusätzlichen Steuerelements, das in Flexbox über die Box Alignment- Spezifikation eingeführt wurde.

Am Ende

Die Ausrichtungseigenschaften wurden in Flexbox als Liste gestartet. Jetzt haben sie ihre eigene Spezifikation und gelten auch für andere Layoutkontexte. Einige wichtige Fakten helfen Ihnen dabei, sich daran zu erinnern, wie Sie sie in Flexbox verwenden :

• Hauptachse ausrichten und Querachse ausrichten ;
• Um Inhalte ausrichten und Inhalte ausrichten zu können , benötigen Sie freien Speicherplatz für das Spiel.
• Die Eigenschaften " Inhalt ausrichten" und "Inhalt ausrichten" behandeln Elemente als Gruppe und teilen sich den Speicherplatz. Daher können Sie sie nicht für ein separates Element konfigurieren. Daher gibt es für diese Eigenschaften keine Selbstausrichtung.
• Wenn Sie ein Element ausrichten oder eine Gruppe auf der Hauptachse teilen möchten, verwenden Sie hierfür automatische Einrückungen.
• Die Eigenschaft align-items legt alle Werte für align-self der Gruppe fest. Verwenden Sie align-self für das untergeordnete Element, um den Wert für ein einzelnes Element festzulegen.