Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Box-Alignment in Flexbox
DasBox-Alignment-Modul beschreibt, wie das Ausrichten in verschiedenen Layout-Methoden funktioniert. In diesem Leitfaden untersuchen wir, wie Box-Alignment im Kontext vonFlexbox funktioniert. Da dieser Leitfaden darauf abzielt, die spezifischen Aspekte von Flexbox und Box-Alignment zu erläutern, sollte er in Verbindung mit demÜberblick über Box-Alignment gelesen werden, der die gemeinsamen Merkmale des Box-Alignments über verschiedene Layout-Methoden hinweg detailliert beschreibt.
Grundlegendes Beispiel
In diesem Flexbox-Beispiel sind drei Flex-Elemente auf der Hauptachse mitjustify-content und auf der Querachse mitalign-items ausgerichtet. Das erste Element überschreibt die für die Gruppe festgelegtenalign-items-Werte, indem esalign-self aufcenter setzt.
body { font-family: sans-serif;}.box > * { padding: 20px; border: 2px solid rgb(96 139 168); border-radius: 5px; background-color: rgb(96 139 168 / 0.2);}<div> <div>One</div> <div>Two</div> <div>Three <br />has <br />extra <br />text</div></div>.box { display: flex; align-items: flex-start; justify-content: space-between; border: 2px dotted rgb(96 139 168);}.box :first-child { align-self: center;}Die Achsen und Flex-Richtung
Flexbox respektiert den Schreibmodus des Dokuments, daher werden, wenn Sie in Englisch arbeiten undjustify-content aufflex-end setzen, die Elemente am Ende des Flex-Containers ausgerichtet. Wenn Sie mitflex-direction aufrow arbeiten, erfolgt diese Ausrichtung in der Inline-Richtung.
In Flexbox können Sie jedoch die Hauptachse ändern, indem Sie dieflex-direction aufcolumn setzen. In diesem Fall richtetjustify-content die Elemente in der Blockrichtung aus. Daher ist es am einfachsten, die Haupt- und Querachse beim Arbeiten mit Flexbox folgendermaßen zu betrachten:
- Die Hauptachse = Richtung, die durch
flex-directionfestgelegt wird = Ausrichtung überjustify-content - Die Querachse = verläuft quer zur Hauptachse = Ausrichtung über
align-content,align-self/align-items
Ausrichtung der Hauptachse
Ausrichtung der Querachse
Es gibt kein justify-self in Flexbox
Auf der Hauptachse behandelt Flexbox die Flex-Elemente als Gruppe. Der Platzbedarf für das Layout der Elemente wird berechnet, und der verbleibende Platz steht dann zur Verteilung zur Verfügung. Die Eigenschaftjustify-content steuert, wie dieser verbleibende Raum genutzt wird. Setzen Siejustify-content: flex-end und der zusätzliche Raum wird vor den Elementen platziert,justify-content: space-around und er wird auf beiden Seiten des Elements in dieser Dimension platziert, usw.
Dies bedeutet, dass einejustify-self-Eigenschaft in Flexbox keinen Sinn macht, da wir immer die gesamte Gruppe von Elementen verschieben.
Auf der Querachse machtalign-self Sinn, da möglicherweise zusätzlicher Platz im Flex-Container in dieser Dimension vorhanden ist, in dem ein einzelnes Element zum Anfang und Ende bewegt werden kann.
Ausrichtung und automatische Ränder
Es gibt einen speziellen Anwendungsfall in Flexbox, bei dem wir denken könnten, dass einejustify-self-Eigenschaft das ist, was wir brauchen, nämlich wenn wir eine Reihe von Flex-Elementen aufteilen wollen, um möglicherweise ein geteiltes Navigationsmuster zu erstellen. Für diesen Anwendungsfall können wir einenauto-Rand verwenden. Ein aufauto gesetzter Rand absorbiert den gesamten verfügbaren Platz in seiner Dimension. So funktioniert das Zentrieren eines Blocks mit automatischen Rändern. Indem Sie den linken und rechten Rand aufauto setzen, versuchen beide Seiten unseres Blocks, den gesamten verfügbaren Platz einzunehmen, und drücken dadurch die Box in die Mitte.
Indem auf ein Element in einer Gruppe von Flex-Elementen, die alle auf Anfang ausgerichtet sind, einauto-Rand gesetzt wird, können wir eine geteilte Navigation erstellen. Dies funktioniert gut mit Flexbox und den Ausrichtungseigenschaften. Sobald kein Platz mehr für den automatischen Rand zur Verfügung steht, verhält sich das Element wie alle anderen Flex-Elemente und schrumpft, um in den Raum zu passen.
<div> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div></div>.box { display: flex; border: 2px dotted rgb(96 139 168);}.push { margin-left: auto;}Diegap-Eigenschaften
Erstellen von festen Abständen zwischen Elementen
Auf der Hauptachse erzeugt die Eigenschaftcolumn-gap feste Abstände zwischen benachbarten Elementen.
Auf der Querachse erzeugt die Eigenschaftrow-gap Abstände zwischen benachbarten Flex-Linien, daher mussflex-wrap auch aufwrap gesetzt werden, damit dies eine Wirkung hat.
<div> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div></div>.box { width: 450px; display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 2em; border: 2px dotted rgb(96 139 168);}.box > * { flex: 1;}