Box-Ausrichtung in Flexbox

Das Box-Ausrichtungsmodul beschreibt, wie Ausrichtung in verschiedenen Layout-Methoden funktioniert. In diesem Leitfaden untersuchen wir, wie die Box-Ausrichtung im Kontext von Flexbox funktioniert. Da dieser Leitfaden darauf abzielt, Dinge zu erklären, die spezifisch für Flexbox und Box-Ausrichtung sind, sollte er in Verbindung mit dem Box-Ausrichtungsüberblick gelesen werden, der die gemeinsamen Merkmale der Box-Ausrichtung über Layout-Methoden hinweg beschreibt.

Einfaches Beispiel

In diesem Flexbox-Beispiel werden drei Flex-Elemente auf der Hauptachse mit justify-content und auf der Querachse mit align-items ausgerichtet. Das erste Element überschreibt die align-items-Werte, die auf die Gruppe angewendet wurden, indem es align-self auf center 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);
}

html

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three <br />has <br />extra <br />text</div>
</div>

css

.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 die Flex-Direction

Flexbox respektiert den Schreibmodus des Dokuments. Wenn Sie also in Englisch arbeiten und justify-content auf flex-end setzen, werden die Elemente am Ende des Flex-Containers ausgerichtet. Wenn Sie mit flex-direction auf row eingestellt arbeiten, erfolgt diese Ausrichtung in der Inline-Richtung.

Jedoch können Sie in Flexbox die Hauptachse ändern, indem Sie flex-direction auf column setzen. In diesem Fall wird justify-content die Elemente in der Blockrichtung ausrichten. Daher ist es am einfachsten, über die Haupt- und Querachse in Flexbox wie folgt nachzudenken:

Die Hauptachse = Richtung, die durch flex-direction gesetzt wird = Ausrichtung über justify-content
Die Querachse = verläuft über die Hauptachse = Ausrichtung über align-content, align-self/align-items

Ausrichtung der Hauptachse

justify-content

Ausrichtung der Querachse

Es gibt kein justify-self in Flexbox

Auf der Hauptachse behandelt Flexbox die Flex-Elemente als eine Gruppe. Der Platzbedarf für die Anordnung der Elemente wird berechnet, und der verbleibende Raum steht dann zur Verteilung zur Verfügung. Die Eigenschaft justify-content steuert, wie dieser verbleibende Raum genutzt wird. Setzen Sie justify-content: flex-end und der zusätzliche Raum wird vor den Elementen platziert, justify-content: space-around und der Raum wird beiderseits des Elements in dieser Dimension platziert, etc.

Das bedeutet, dass eine justify-self Eigenschaft in Flexbox keinen Sinn macht, da wir es immer mit der Bewegung der gesamten Gruppe von Elementen zu tun haben.

Auf der Querachse macht align-self Sinn, da wir möglicherweise zusätzlichen Platz im Flex-Container in dieser Dimension haben, in dem ein einzelnes Element zum Start und Ende bewegt werden kann.

Ausrichtung und automatische Abstände

Es gibt einen spezifischen Anwendungsfall in Flexbox, bei dem wir möglicherweise denken, dass eine justify-self Eigenschaft das ist, was wir brauchen, und zwar wenn wir eine Reihe von Flex-Elementen aufteilen wollen, vielleicht um ein Aufteilungsmuster für die Navigation zu erstellen. Für diesen Anwendungsfall können wir einen auto-Rand verwenden. Ein auf auto gesetzter Rand wird den gesamten verfügbaren Raum in seiner Dimension auffangen. So funktioniert das Zentrieren eines Blocks mit automatischen Rändern. Indem der linke und rechte Rand auf auto gesetzt werden, versuchen beide Seiten des Blocks, den gesamten verfügbaren Raum einzunehmen und schieben so die Box in die Mitte.

Indem wir einen margin von auto auf ein Element in einer Gruppe von Flex-Elementen setzen, die alle zum Start ausgerichtet sind, können wir eine geteilte Navigation erstellen. Dies funktioniert gut mit Flexbox und den Ausrichtungseigenschaften. Sobald kein Platz mehr für den automatischen Rand verfügbar ist, verhält sich das Element wie alle anderen Flex-Elemente und schrumpft, um zu versuchen, in den Raum zu passen.

html

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div class="push">Four</div>
  <div>Five</div>
</div>

css

.box {
  display: flex;
  border: 2px dotted rgb(96 139 168);
}
.push {
  margin-left: auto;
}

Die `gap` Eigenschaften

Erstellen von festen Abständen zwischen Elementen

Auf der Hauptachse erstellt die Eigenschaft column-gap feste Abstände zwischen benachbarten Elementen.

Auf der Querachse erstellt die Eigenschaft row-gap Abstände zwischen benachbarten Flex-Linien, daher muss flex-wrap auch auf wrap gesetzt werden, damit dies Wirkung zeigt.

html

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

css

.box {
  width: 450px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 2em;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  flex: 1;
}