Box-Ausrichtung in Flexbox

Das Box-Ausrichtungsmodul beschreibt, wie die 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 erläutern, 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.

Grundlegendes Beispiel

In diesem Flexbox-Beispiel werden drei Flex-Items auf der Hauptachse unter Verwendung von justify-content und auf der Querachse unter Verwendung von align-items ausgerichtet. Das erste Element überschreibt die align-items-Werte, die auf die Gruppe gesetzt sind, indem es align-self auf center setzt.

html

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

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

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 flex-direction

Flexbox respektiert die Schreibweise des Dokuments. Daher, wenn Sie auf 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 arbeiten, erfolgt diese Ausrichtung in der Inline-Richtung.

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

Die Hauptachse = Richtung durch flex-direction festgelegt = Ausrichtung über justify-content
Die Querachse = verläuft quer zur Hauptachse = Ausrichtung über align-content, align-self/align-items

Hauptachsen-Ausrichtung

justify-content

Querachsen-Ausrichtung

Es gibt kein justify-self in Flexbox

Auf der Hauptachse behandelt Flexbox die Flex-Items als Gruppe. Der erforderliche Platz zur Anordnung der Elemente wird berechnet, und der übriggebliebene Platz steht dann zur Verteilung zur Verfügung. Die justify-content-Eigenschaft steuert, wie dieser Platz genutzt wird. Setzen Sie justify-content: flex-end und der zusätzliche Platz wird vor den Elementen platziert, justify-content: space-around und es wird auf beiden Seiten des Elements in dieser Dimension platziert, etc.

Dies bedeutet, dass eine justify-self-Eigenschaft in Flexbox keinen Sinn ergibt, da es immer darum geht, die gesamte Gruppe von Elementen zu bewegen.

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

Ausrichtung und auto-Margen

Es gibt einen bestimmten Anwendungsfall in Flexbox, bei dem wir denken könnten, dass eine justify-self-Eigenschaft das ist, was wir brauchen, und das ist, wenn wir eine Gruppe von Flex-Items aufteilen möchten, vielleicht um ein geteiltes Navigation-Muster zu erstellen. Für diesen Anwendungsfall können wir eine auto-Margin verwenden. Eine auf auto gesetzte Margin nimmt allen verfügbaren Platz in ihrer Dimension ein. So funktioniert das Zentrieren eines Blocks mit automatischen Margen. Indem man die linke und rechte Margin auf auto setzt, versuchen beide Seiten unseres Blocks, den gesamten verfügbaren Platz einzunehmen und drücken so die Box in die Mitte.

Indem Sie einer Reihe von Flex-Items, die alle auf den Anfang ausgerichtet sind, eine margin von auto auf einem Element setzen, können wir eine geteilte Navigation erstellen. Dies funktioniert gut mit Flexbox und den Ausrichtungseigenschaften. Sobald kein Platz für die automatische Margin verfügbar ist, verhält sich das Element wie alle anderen Flex-Items und schrumpft, um in den Platz zu passen.

html

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

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

css

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

Die `gap`-Eigenschaften

Erstellen fester Größenlücken zwischen Elementen

Auf der Hauptachse erstellt die column-gap-Eigenschaft feste Lücken zwischen benachbarten Elementen.

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

html

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

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

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;
}