Box-Ausrichtung in Flexbox

Das Box-Ausrichtungsmodul beschreibt, wie Ausrichtung in verschiedenen Layoutmethoden funktioniert. In diesem Leitfaden untersuchen wir, wie die Box-Ausrichtung im Kontext von Flexbox funktioniert. Da dieser Leitfaden darauf abzielt, die spezifischen Aspekte von Flexbox und der Box-Ausrichtung zu detaillieren, sollte er in Verbindung mit dem Box-Ausrichtungsüberblick gelesen werden, der die gemeinsamen Merkmale der Box-Ausrichtung über Layoutmethoden hinweg beschreibt.

Einfaches Beispiel

In diesem Flexbox-Beispiel werden drei Flex-Elemente auf der Hauptachse mithilfe von justify-content und auf der Querachse mit align-items ausgerichtet. Das erste Element überschreibt die align-items-Werte, die auf die Gruppe festgelegt wurden, indem align-self auf center gesetzt wird.

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 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 im Modus row arbeiten, erfolgt diese Ausrichtung in der Inline-Richtung.

In Flexbox können Sie jedoch 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 in Flexbox wie folgt nachzudenken:

Die Hauptachse = Richtung festgelegt durch flex-direction = Ausrichtung durch justify-content
Die Querachse = verläuft quer zur Hauptachse = Ausrichtung durch 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-Elemente als Gruppe. Der für das Layout der Elemente erforderliche Platz wird berechnet, und der übrige Platz steht dann zur Verteilung zur Verfügung. Die Eigenschaft justify-content steuert, wie dieser übrige Platz verwendet wird. Wenn Sie justify-content: flex-end setzen, wird der zusätzliche Platz vor den Elementen platziert, justify-content: space-around verteilt ihn auf beiden Seiten des Elements in dieser Dimension usw.

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

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

Ausrichtung und automatische Margen

Es gibt einen speziellen Anwendungsfall in Flexbox, bei dem wir denken könnten, dass eine justify-self-Eigenschaft das ist, was wir brauchen, und zwar, wenn wir eine Gruppe von Flex-Elementen aufteilen wollen, möglicherweise um ein aufgeteiltes Navigationsmuster zu erstellen. Für diesen Anwendungsfall können wir eine auto-Margin verwenden. Eine auf auto gesetzte Margin wird allen verfügbaren Platz in ihrer Dimension aufnehmen. 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 das Kästchen in die Mitte.

Indem man einem Element in einem Satz von Flex-Elementen, die alle auf den Start ausgerichtet sind, eine margin von auto zuweist, kann man eine geteilte Navigation erstellen. Dies funktioniert gut mit Flexbox und den Ausrichtungseigenschaften. Sobald kein Platz mehr für die autogene Margin 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

Feste Lücken zwischen Elementen erstellen

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, weshalb flex-wrap auch auf wrap gesetzt werden muss, damit dies eine 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;
}