CSS Box-Ausrichtung

CSS hatte traditionell nur sehr begrenzte Möglichkeiten zur Ausrichtung. Wir konnten Text mit text-align ausrichten, Blöcke mit automatischen margins zentrieren und in Tabellen- oder Inline-Block-Layouts mit der vertical-align Eigenschaft arbeiten. Die Ausrichtung von Text wird jetzt durch die Module Inline-Layout und CSS Text abgedeckt, und zum ersten Mal haben wir in der Box-Ausrichtung vollständige horizontale und vertikale Ausrichtungsfähigkeiten.

Wenn Sie anfänglich Flexbox gelernt haben, dann betrachten Sie diese Eigenschaften möglicherweise als Teil der Flexbox-Spezifikation, und einige der Eigenschaften sind tatsächlich in Level 1 von Flexbox aufgeführt. Die Spezifikation merkt jedoch an, dass auf die Box-Ausrichtungsspezifikation verwiesen werden sollte, da sie zusätzliche Fähigkeiten über das hinaus hinzufügen kann, was derzeit in Flexbox verfügbar ist.

Die folgenden Beispiele demonstrieren, wie einige der Box-Ausrichtungseigenschaften in Grid und Flexbox angewendet werden.

In diesem Beispiel mit Grid-Layout gibt es zusätzlichen Platz im Grid-Container, nachdem die festgelegten Breiten-Tracks auf der Inline-(Haupt-)Achse ausgelegt wurden. Dieser Platz wird mithilfe von justify-content verteilt. Auf der Block-(Quer-)Achse wird die Ausrichtung der Elemente innerhalb ihrer Grid-Bereiche 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;
}

In diesem Beispiel sind drei Flex-Elemente auf der Hauptachse mit justify-content und auf der Querachse mit align-items ausgerichtet. Das erste Element überschreibt die align-items, die auf die Gruppe gesetzt sind, 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 Spezifikation beschreibt einige Ausrichtungsbegriffe, um die Diskussion dieser Ausrichtungseigenschaften außerhalb ihrer Implementierung in einer bestimmten Layoutmethode zu erleichtern. Es gibt auch einige Schlüsselkonzepte, die allen Layoutmethoden gemeinsam sind.

Ausrichtung ist mit Schreibmodi verknüpft, da wir bei der Ausrichtung eines Elements 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 unabhängig vom Schreibmodus des Dokuments gleich funktioniert.

Beim Verwenden der Box-Ausrichtungseigenschaften richten Sie Inhalte auf einer von zwei Achsen aus — der Inline-(oder Haupt-)Achse und der Block-(oder Quer-)Achse. Die Inline-Achse ist die Achse, entlang derer Wörter in einem Satz im verwendeten Schreibmodus fließen — für Englisch ist die Inline-Achse beispielsweise horizontal. Die Block-Achse ist die Achse, entlang derer Blöcke, wie Absatzelemente, ausgelegt sind und 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, dass das Obige zutrifft, wenn flex-direction auf row gesetzt ist. Die Eigenschaften werden vertauscht, wenn Flexbox auf column gesetzt ist. Daher ist es bei der Arbeit mit Flexbox einfacher, über die Haupt- und Querachse nachzudenken, anstelle von Inline und Block. Die justify- Eigenschaften werden immer verwendet, um auf der Hauptachse auszurichten, die align- Eigenschaften auf der Querachse.

Das Ausrichtungsobjekt ist das, was ausgerichtet wird. Bei justify-self oder align-self, oder wenn diese Werte als Gruppe mit justify-items oder align-items festgelegt werden, handelt es sich um das Margenfeld des Elements, auf dem diese Eigenschaft verwendet wird. Die Eigenschaften justify-content und align-content unterscheiden sich je nach Layoutmethode.

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

Das untenstehende Bild zeigt einen Ausrichtungscontainer mit zwei darin enthaltenen Ausrichtungsobjekten.

Wenn Sie eine Ausrichtung festlegen, die nicht erfüllt werden kann, dann tritt die Fallback-Ausrichtung in Kraft und verwaltet den verfügbaren Platz. Diese Fallback-Ausrichtung wird individuell für jede Layoutmethode spezifiziert und auf der Seite für diese Methode detailliert erläutert.

Es gibt drei verschiedene Arten der Ausrichtung, die die Spezifikation detailliert beschreibt; diese verwenden Schlüsselwortwerte.

• Positionelle Ausrichtung: Spezifizierung der Position eines Ausrichtungsobjekts in Bezug auf seinen Ausrichtungscontainer.
• Baseline-Ausrichtung: Diese Schlüsselwörter definieren die Ausrichtung als Beziehung unter den Baselines mehrerer Ausrichtungsobjekte innerhalb eines Ausrichtungskontexts.
• Verteilte Ausrichtung: Diese Schlüsselwörter definieren die Ausrichtung als Verteilung des Raumes unter Ausrichtungsobjekten.

Die folgenden Werte sind für die positionsbezogene Ausrichtung 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 logische Werte und beziehen sich auf den Schreibmodus des Inhalts.

Zum Beispiel, wenn Sie im CSS-Grid-Layout arbeiten und auf Englisch arbeiten und justify-content auf start einstellen, werden die Elemente in der Inline-Dimension nach links verschoben, da Sätze auf Englisch links beginnen. Wenn Sie Arabisch verwenden, eine von rechts nach links verlaufende Sprache, würde derselbe Wert start dazu führen, dass die Elemente nach rechts verschoben werden, da Sätze auf Arabisch auf der rechten Seite der Seite beginnen.

Beide dieser Beispiele haben justify-content: start, jedoch ändert sich die Position des Anfangs entsprechend dem Schreibmodus.

Die Baseline-Ausrichtungsschlüsselwörter werden verwendet, um die Baselines von Boxen über eine Gruppe von Ausrichtungsobjekten hinweg auszurichten. Sie 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.

• baseline
• first baseline
• last baseline

Basislinien-Inhaltsausrichtung — die Angabe eines Basislinien-Ausrichtungswerts für justify-content oder align-content — funktioniert bei Layoutmethoden, die Elemente in Reihen anordnen. Die Ausrichtungsobjekte werden gegeneinander anhand der Basislinie ausgerichtet, indem Padding innerhalb der Boxen hinzugefügt wird.

Basislinien-Selbstausrichtung verschiebt die Boxen zur Ausrichtung an der Basislinie, indem ein Außen-Abstand um die Boxen hinzugefügt wird. Die Selbstausrichtung erfolgt bei der Verwendung von justify-self oder align-self, oder beim Festlegen dieser Werte als Gruppe mit justify-items und align-items.

Die verteilten Ausrichtungsschlüsselwörter werden mit den Eigenschaften align-content und justify-content verwendet. Diese Schlüsselwörter definieren, was mit zusätzlichem Platz passiert, nachdem die Ausrichtungsobjekte angezeigt wurden. Die Werte sind wie folgt:

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

Zum Beispiel werden im Flex-Layout Elemente zunächst mit flex-start ausgerichtet. Bei der Arbeit in einem horizontalen Top-Down-Schreibmodus wie Englisch, mit flex-direction als row, beginnen die Elemente ganz links und jeder verfügbare Platz nach dem Anzeigen der Elemente wird nach den Elementen platziert.

Wenn Sie justify-content: space-between für den Flex-Container festlegen, wird der verfügbare Platz nun verteilt und zwischen den Elementen platziert.

Es muss Raum in der Dimension vorhanden sein, in der Sie die Elemente ausrichten möchten, damit diese Schlüsselwörter Wirkung zeigen. Ohne Raum gibt es nichts zu verteilen.

Die Schlüsselwörter safe und unsafe helfen dabei, das Verhalten zu definieren, wenn ein Ausrichtungsobjekt größer als der Ausrichtungscontainer ist. Das safe-Schlüsselwort richtet auf start aus im Falle einer spezifischen Ausrichtung, die einen Überlauf verursacht, mit dem Ziel, "Datenverlust" zu vermeiden, bei dem ein Teil des Elements außerhalb der Grenzen des Ausrichtungscontainers liegt und nicht gescrollt werden kann.

Wenn Sie unsafe angeben, wird die Ausrichtung trotz drohendem Datenverlust beibehalten.

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 Spalte einzustellen, in jeder Layout-Methode, die Elemente auf diese Weise anordnet.

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

• row-gap
• column-gap
• gap

Im untenstehenden Beispiel verwendet ein Grid-Layout die gap-Abkürzung, um einen 10px Abstand zwischen den Zeilen und einen 2em Abstand zwischen den Spalten 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;
}

Seien Sie sich bewusst, dass andere Dinge die visuelle Lücke erhöhen können, beispielsweise durch Verwendung der Raumverteilungsschlüsselwörter oder das Hinzufügen von Abständen zu den Elementen.

Da die CSS Box-Ausrichtungseigenschaften je nach Spezifikation, mit der sie interagieren, unterschiedlich implementiert werden, sollten Sie die folgenden Seiten für jeden Layouttyp konsultieren, um Einzelheiten zur Verwendung der Ausrichtungseigenschaften mit diesem zu erfahren:

• Box-Ausrichtung in Flexbox
• Box-Ausrichtung im CSS-Grid-Layout
• Box-Ausrichtung im Mehrspaltenlayout
• Box-Ausrichtung für Block-, absolut positioniertes und Tabellenlayout

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• justify-self
• align-self
• place-self
• row-gap
• column-gap
• gap

• Querachse
• Hauptachse
• Ausrichtungscontainer
• Ausrichtungsobjekt
• Fallback-Ausrichtung

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