Überblick über die CSS-Box-Ausrichtung

Die Spezifikation beschreibt einige Ausrichtungsterminologien, um es einfacher zu machen, über diese Ausrichtungseigenschaften außerhalb ihrer Implementierung innerhalb einer bestimmten Layout-Methode zu sprechen. Es gibt auch einige Schlüsselkonzepte, die für alle Layout-Methoden gemeinsam sind.

Die Ausrichtung ist mit Schreibmodi verbunden, da wir beim Ausrichten eines Elements nicht berücksichtigen, ob wir es zu den physischen Dimensionen von oben, rechts, unten und links ausrichten. Stattdessen beschreiben wir die Ausrichtung in Bezug auf den Anfang und das Ende der jeweiligen Dimension, mit der wir arbeiten. Dies stellt sicher, dass die Ausrichtung unabhängig vom im Dokument verwendeten Schreibmodus gleich funktioniert.

Bei der Verwendung der Box-Ausrichtungs-Eigenschaften richten Sie den Inhalt auf einer von zwei Achsen aus — der Inline- (oder Haupt-)Achse und der Block- (oder Quer-)Achse. Die Inline-Achse ist die Achse, entlang der die Wörter in einem Satz im verwendeten Schreibmodus fließen. Im Englischen ist beispielsweise die Inline-Achse horizontal. Die Block-Achse ist die Achse, entlang der Blöcke wie Absatz-Elemente angeordnet werden; sie verläuft quer zur Inline-Achse.

Bei der Ausrichtung von Elementen auf der Inline-Achse verwenden Sie die Eigenschaften, die mit justify- beginnen:

• justify-items
• justify-self
• justify-content

Bei der Ausrichtung von Elementen auf der Block-Achse verwenden Sie die Eigenschaften, die mit align- beginnen:

• align-items
• align-self
• align-content

Flexbox fügt eine zusätzliche Komplikation hinzu, da das oben Gesagte zutrifft, wenn flex-direction auf row gesetzt ist. Die Eigenschaften werden vertauscht, wenn Flexbox auf column gesetzt ist. Daher ist es einfacher, bei der Arbeit mit Flexbox an die Haupt- und Querachse anstelle von Inline und Block zu denken. Die justify- Eigenschaften werden immer verwendet, um auf der Hauptachse auszurichten, die align- Eigenschaften auf der Querachse.

Das Ausrichtungsobjekt ist das Element, das ausgerichtet wird. Für justify-self oder align-self, oder wenn diese Werte als Gruppe mit justify-items oder align-items festgelegt werden, wird dies die Margin-Box des Elements sein, auf das diese Eigenschaft angewendet wird. Die justify-content und align-content Eigenschaften unterscheiden sich je nach Layout-Methode.

Der Ausrichtungscontainer ist die Box, in der das Ausrichtungsobjekt ausgerichtet wird. Dies ist typischerweise der enthaltene Block des Ausrichtungsobjekts. Ein Ausrichtungscontainer kann ein oder mehrere Ausrichtungsobjekte enthalten.

Das folgende Bild zeigt einen Ausrichtungscontainer mit zwei darin befindlichen Ausrichtungsobjekten.

Es gibt drei verschiedene Arten der Ausrichtung, die die Spezifikation beschreibt; diese verwenden Schlüsselwert-Werte.

• Positionale Ausrichtung
• Basislinienausrichtung
• Verteilte Ausrichtung

Positionale Ausrichtung ist die Position eines Ausrichtungsobjekts in Bezug auf seinen Ausrichtungscontainer. Die Schlüsselwert-Werte für die positionale Ausrichtung sind definiert und können als Werte für die Inhaltsausrichtung mit justify-content und align-content sowie für die Selbstausrichtung mit justify-self und align-self verwendet werden.

• center
• start
• end
• self-start
• self-end
• flex-start nur für Flexbox
• flex-end nur für Flexbox
• left
• right

Abgesehen von den physischen Werten left und right, die sich auf physische Attribute des Bildschirms beziehen, sind alle anderen Werte, die <self-position> und <content-position> Werte, logische Werte und beziehen sich auf den Schreibmodus des Inhalts.

Zum Beispiel, wenn Sie in einem CSS-Grid-Layout arbeiten, auf Englisch arbeiten und justify-content auf start setzen, werden die Elemente in der Inline-Dimension an den Anfang verschoben, was links sein wird, da Sätze im Englischen auf der linken Seite der Seite beginnen. Wenn Sie Arabisch, eine von rechts nach links verlaufende Sprache, verwenden, würde der gleiche Wert von start dazu führen, dass die Elemente nach rechts verschoben werden, da Sätze im Arabischen auf der rechten Seite der Seite beginnen.

Beide haben justify-content: start, aber der Ort der beiden Starts ist aufgrund des Schreibmodus unterschiedlich.

Basislinienausrichtung ist die Beziehung zwischen den Basislinien mehrerer Ausrichtungsobjekte innerhalb eines Ausrichtungskontexts. Die Basislinienausrichtung <baseline-position> Schlüsselwörter werden verwendet, um die Basislinien von Boxen über eine Gruppe von Ausrichtungsobjekten hinweg auszurichten. Sie können als Werte für die Inhaltsausrichtung mit justify-content und align-content und für die Selbstausrichtung mit justify-self und align-self verwendet werden.

• baseline
• first baseline
• last baseline

Die Basislinienaussrichtung des Inhalts — das Angeben eines Basislinienaussrichtungswerts für justify-content oder align-content — funktioniert in Layout-Methoden, die Elemente in Reihen anordnen. Die Ausrichtungsobjekte werden durch das Hinzufügen von Innenabstand innerhalb der Boxen an ihrer Basislinie ausgerichtet.

Die Basislinienaussrichtung von Einzelobjekten verschiebt die Boxen, um sie durch Hinzufügen eines Außenabstands außerhalb der Boxen an ihrer Basislinie auszurichten. Die Selbstausrichtung wird für einzelne Boxen mittels justify-self oder align-self durchgeführt, oder für Gruppen von Boxen mittels justify-items und align-items.

Verteilte Ausrichtung definiert die Ausrichtung als Verteilung von Raum zwischen Ausrichtungsobjekten. Die verteilte Ausrichtung <content-distribution> Schlüsselwörter werden mit den Eigenschaften align-content und justify-content verwendet. Diese Schlüsselwörter definieren, was mit zusätzlichem Raum passiert, nachdem Ausrichtungsobjekte angezeigt wurden. Die Werte sind wie folgt:

• stretch
• space-between
• space-around
• space-evenly

In einem Flex-Layout werden zum Beispiel Elemente standardmäßig mit flex-start ausgerichtet. In einem horizontalen Schreibmodus von oben nach unten (mit einer Sprache wie Englisch) und mit flex-direction auf row gesetzt, beginnen die Elemente ganz links, und jeder verfügbare Raum nach der Anzeige der Elemente wird nach ihnen platziert.

Wenn Sie justify-content: space-between auf dem Flex-Container festlegen, wird der verfügbare Raum jetzt aufgeteilt und zwischen den Elementen platziert.

Damit diese Schlüsselwörter Wirkung zeigen, ist Raum erforderlich entlang der Dimension, in der Sie die Elemente ausrichten möchten. Ohne Raum gibt es nichts zu verteilen.

Die folgenden Beispiele zeigen, wie einige der Box-Ausrichtungs-Eigenschaften in Grid und Flexbox angewendet werden.

CSS-Grid-Layout-Ausrichtungsbeispiel

In diesem Grid-Layout-Beispiel gibt es zusätzlichen Raum im Grid-Container, nachdem die festen Breiten-Tracks auf der Inline- (Haupt-)Achse ausgelegt wurden. Dieser Raum wird mittels justify-content verteilt. Auf der Block- (Quer-)Achse wird die Ausrichtung der Elemente in ihren Grid-Bereichen mit align-items kontrolliert. Das erste Element überschreibt den align-items Wert, der auf die Gruppe gesetzt ist, indem es align-self auf center setzt.

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

body {
  font: 1.2em sans-serif;
}

.box {
  border: 2px dotted rgb(96 139 168);
}

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

.box {
  display: grid;
  grid-template-columns: 120px 120px 120px;
  align-items: start;
  justify-content: space-between;
}

.box :first-child {
  align-self: center;
}

Beispiel zur Flexbox-Ausrichtung

In diesem Beispiel werden drei Flex-Elemente auf der Hauptachse mittels justify-content und auf der Querachse mittels align-items ausgerichtet. Das erste Element überschreibt den für die Gruppe gesetzten align-items, indem es align-self auf center setzt.

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

body {
  font: 1.2em sans-serif;
}

.box {
  border: 2px dotted rgb(96 139 168);
}

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

.box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.box :first-child {
  align-self: center;
}

Die <overflow-position> Schlüsselwörter safe und unsafe helfen, das Verhalten zu definieren, wenn ein Ausrichtungsobjekt größer als der Ausrichtungscontainer ist. Das safe Schlüsselwort wird bei einer Ausrichtung zu start ausrichten, falls eine festgelegte Ausrichtung einen Überlauf verursacht, wobei das Ziel ist, "Datenverlust" zu vermeiden, bei dem ein Teil des Elements außerhalb der Grenzen des Ausrichtungscontainers landet und nicht gescrollt werden kann.

Wenn Sie unsafe angeben, wird die Ausrichtung beachtet, auch wenn dadurch ein solcher Datenverlust verursacht wird.

Die Box-Ausrichtungs-Spezifikation enthält auch die Eigenschaften gap, row-gap und column-gap. Diese Eigenschaften ermöglichen es, einen konsistenten Abstand zwischen Elementen in einer Reihe oder Spalte in jeder Layout-Methode einzustellen, die Elemente auf diese Weise anordnet.

Die Eigenschaft gap ist eine Kurzform für row-gap und column-gap, die es uns ermöglicht, diese Eigenschaften gleichzeitig festzulegen:

• row-gap
• column-gap
• gap

Im folgenden Beispiel verwendet ein Grid-Layout die Kurzform gap, um einen Abstand von 10px zwischen Reihen-Tracks und einen Abstand von 2em zwischen Spalten-Tracks festzulegen.

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

body {
  font: 1.2em sans-serif;
}

.box {
  border: 2px dotted rgb(96 139 168);
}

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

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px 2em;
}

.box :first-child {
  align-self: center;
}

Frühere Grid-Implementierungen enthielten gap-Eigenschaften mit dem Präfix grid-. Alle Browser unterstützen die nicht mit dem Präfix versehenen Eigenschaften, dennoch können Sie die folgenden Eigenschaften in einem Code-Bestand sehen: grid-row-gap, grid-column-gap, und grid-gap. Die mit dem Präfix versehenen Versionen sind Aliase der nicht mit dem Präfix versehenen.

Seien Sie sich bewusst, dass andere Dinge die visuell angezeigte Lücke vergrößern können, z.B. die Verwendung von Schlüsselwörtern zur Verteilung von Abständen oder das Hinzufügen von Rändern zu Elementen.

Da die CSS-Box-Ausrichtungs-Eigenschaften je nach der Spezifikation, mit der sie interagieren, unterschiedlich implementiert sind, beziehen Sie sich auf die folgenden Leitfäden für Details zur Verwendung der Ausrichtungseigenschaften mit jedem Layout-Typ:

• Box-Ausrichtung in Flexbox
• Box-Ausrichtung in CSS-Grid-Layouts
• Box-Ausrichtung in Mehrspalten-Layouts
• Box-Ausrichtung für Block-, absolut positioniertem und Tabellenlayout

• CSS Display Modul
• CSS Flex-Layout Modul
• Grundlegende Konzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• CSS Grid-Layout Modul
• Box-Ausrichtung in CSS-Grid-Layouts