Überblick über die CSS-Box-Ausrichtung

Hauptkonzepte und Terminologie

Die Spezifikation beschreibt einige Ausrichtungsterminologien, um es einfacher zu machen, über diese Ausrichtungseigenschaften außerhalb ihrer Implementierung innerhalb einer bestimmten Layoutmethode zu diskutieren. Es gibt auch einige Schlüsselkonzepte, die allen Layoutmethoden gemeinsam sind.

Beziehung zu Schreibmodi

Ausrichtung ist mit Schreibmodi verknüpft, da, wenn wir ein Element ausrichten, wir nicht berücksichtigen, ob wir es an 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 gleichermaßen funktioniert, unabhängig davon, welchen Schreibmodus das Dokument hat.

Zwei Dimensionen der Ausrichtung

Beim Einsatz der Box-Ausrichtungs-Eigenschaften richten Sie den Inhalt an einer von zwei Achsen aus — der Inline- (oder Haupt-) Achse und der Block- (oder Kreuz-) Achse. Die Inline-Achse ist die Achse, entlang derer 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 Paragraphenelemente, angeordnet werden; sie verläuft quer zur Inline-Achse.

Beim Ausrichten von Elementen an der Inline-Achse verwenden Sie Eigenschaften, die mit justify- beginnen:

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

Beim Ausrichten von Elementen an der Block-Achse verwenden Sie Eigenschaften, die mit align- beginnen:

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

Flexbox bringt eine zusätzliche Komplikation mit sich, dass das Obige zutrifft, wenn flex-direction auf row gesetzt ist. Die Eigenschaften werden ausgetauscht, wenn Flexbox auf column eingestellt ist. Daher ist es im Allgemeinen einfacher, bei Flexbox über die Haupt- und Kreuzachse nachzudenken, anstatt über Inline- und Block-Achsen. Die justify- Eigenschaften werden immer verwendet, um an der Hauptachse auszurichten, die align- Eigenschaften an der Kreuzachse.

Das Ausrichtungssubjekt

Das Ausrichtungssubjekt ist das Objekt, das ausgerichtet wird. Bei justify-self oder align-self oder beim Setzen dieser Werte als Gruppe mit justify-items oder align-items wird dies die Randbox des Elements sein, auf dem diese Eigenschaft verwendet wird. Die justify-content und align-content Eigenschaften unterscheiden sich je nach Layoutmethode.

Der Ausrichtungscontainer

Der Ausrichtungscontainer ist die Box, in der das Subjekt ausgerichtet wird. Dies ist in der Regel der umgebende Block des Ausrichtungssubjekts. Ein Ausrichtungscontainer kann ein oder mehrere Ausrichtungssubjekte enthalten.

Das untenstehende Bild zeigt einen Ausrichtungscontainer mit zwei Ausrichtungssubjekten darin.

Arten der Ausrichtung

Die Spezifikation beschreibt drei verschiedene Arten der Ausrichtung, die jeweils Schlüsselwortwerte verwenden.

• Positionelle Ausrichtung
• Baseline-Ausrichtung
• Verteilte Ausrichtung

Positionelle Ausrichtung

Positionelle Ausrichtung bezieht sich auf die Position eines Ausrichtungssubjekts in Bezug auf seinen Ausrichtungscontainer. Die Schlüsselwortwerte der positionellen Ausrichtung sind definiert für die positionelle Ausrichtung 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 im CSS-Grid-Layout arbeiten und in Englisch 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 von der linken Seite der Seite beginnen. Wenn Sie Arabisch, eine von rechts nach links verlaufende Sprache, verwenden, würde derselbe Wert start die Elemente nach rechts verschieben, da Sätze im Arabischen von der rechten Seite der Seite beginnen.

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

Baseline-Ausrichtung

Baseline-Ausrichtung ist das Verhältnis zwischen den Baselines mehrerer Ausrichtungssubjekte innerhalb eines Ausrichtungsrahmens. Die Baseline-Ausrichtung-<baseline-position>-Schlüsselwörter werden verwendet, um die Baselines von Boxen in einer Gruppe von Ausrichtungssubjekten 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 Baseline-Inhaltsausrichtung — bei der eine Baseline-Ausrichtung für justify-content oder align-content festgelegt wird — funktioniert in Layoutmethoden, die Elemente in Reihen anordnen. Die Ausrichtungssubjekte sind durch Hinzufügen von Polsterung innerhalb der Boxen an den Baselines gegeneinander ausgerichtet.

Die Baseline-Selbstausrichtung verschiebt die Boxen zur Ausrichtung an der Baseline, indem ein Rand außerhalb der Boxen hinzugefügt wird. Die Selbstausrichtung erfolgt für einzelne Boxen mit justify-self oder align-self oder für Gruppen von Boxen mit justify-items und align-items.

Verteilte Ausrichtung

Verteilte Ausrichtung definiert die Ausrichtung als Verteilung des Raumes zwischen Ausrichtungssubjekten. Die verteilten Ausrichtungs-<content-distribution>-Schlüsselwörter werden mit den Eigenschaften align-content und justify-content verwendet. Diese Schlüsselwörter definieren, was mit jedem zusätzlichen Raum passiert, nachdem die Ausrichtungssubjekte angezeigt wurden. Die Werte sind wie folgt:

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

Zum Beispiel sind im Flex-Layout die Elemente zunächst mit flex-start ausgerichtet. Arbeiten in einem horizontalen Top-to-Bottom-Schreibmodus (mit einer Sprache wie Englisch) und mit flex-direction auf row eingestellt, beginnen die Elemente ganz links, und jeder verfügbare Raum nach der Anzeige der Elemente wird hinter ihnen platziert.

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

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

Grundlegende Beispiele

Die folgenden Beispiele demonstrieren, 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 nach dem Layout der festbreiten Tracks auf der Inline- (Haupt-) Achse. Dieser Raum wird mit justify-content verteilt. Auf der Block- (Kreuz-) Achse wird die Ausrichtung der Elemente innerhalb ihrer Gitterbereiche 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;
}

Flexbox-Ausrichtungsbeispiel

In diesem Beispiel sind drei Flex-Elemente auf der Hauptachse mit justify-content und auf der Kreuzachse mit align-items ausgerichtet. Das erste Element überschreibt das align-items, das 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>

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

Überlauf-Ausrichtung

Die <overflow-position> Schlüsselwörter safe und unsafe helfen, das Verhalten zu definieren, wenn ein Ausrichtungssubjekt größer ist als der Ausrichtungscontainer. Das Schlüsselwort safe wird auf start ausrichten im Falle eines spezifizierten Ausrichtungswertes, welcher einen Überlauf verursacht, mit dem Ziel, "Datenverlust" zu vermeiden, bei dem ein Teil des Elements sich außerhalb der Grenzen des Ausrichtungscontainers befindet und nicht gescrollt werden kann.

Wenn Sie unsafe angeben, wird die Ausrichtung auch dann beachtet, wenn sie zu einem solchen Datenverlust führen würde.

Lücken zwischen Boxen

Die Box-Ausrichtungs-Spezifikation umfasst auch die Eigenschaften gap, row-gap und column-gap. Diese Eigenschaften ermöglichen es, eine konsistente Lücke zwischen Elementen in einer Reihe oder einer Spalte einzustellen, in jedem Layout, das Elemente auf diese Weise anordnet.

Die Eigenschaft gap ist eine Kurzform für row-gap und column-gap, mit der wir diese Eigenschaften gleichzeitig festlegen können:

• row-gap
• column-gap
• gap

Im folgenden Beispiel verwendet ein Grid-Layout die Kurzform gap, um einen 10px Abstand zwischen den Zeilenraster und einen 2em Abstand zwischen den Spaltenraster einzustellen.

<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ühe Grid-Implementierungen enthielten gap-Eigenschaften mit dem Präfix grid-. Alle Browser unterstützen die nicht präfixierten Eigenschaften, obwohl Sie in einem Code-Bereich die folgenden Eigenschaften sehen könnten: grid-row-gap, grid-column-gap, und grid-gap. Die präfixierten Versionen sind Aliasse der nicht präfixierten.

Seien Sie sich bewusst, dass andere Dinge den visuell angezeigten Abstand erhöhen können, beispielsweise die Verwendung der Raumverteilungs-Schlüsselwörter oder die Hinzufügung von Rändern zu Elementen.

Box-Ausrichtung nach Layouttyp

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

• Box-Ausrichtung in Flexbox
• Box-Ausrichtung im CSS-Grid-Layout
• Box-Ausrichtung im Mehrspalt-Layout
• Box-Ausrichtung für Block-, absolut positionierte und Tabellen-Layouts

Siehe auch

• CSS-Box-Ausrichtungs-Modul
• Box-Ausrichtung im Grid-Layout
• CSS-Anzeigemodul
• CSS-Flexlayout-Modul
• Grundkonzepte von Flexbox
• Elemente in einem Flexcontainer ausrichten
• CSS-Grid-Layout-Modul