CSS Box-Ausrichtung
Das CSS Box-Ausrichtung Modul spezifiziert CSS-Funktionen, die sich auf die Ausrichtung von Boxen in den verschiedenen CSS-Box-Layout-Modellen beziehen: Block-Layout, Tabellen-Layout, Flex-Layout und Grid-Layout. Das Modul zielt darauf ab, eine konsistente Methode zur Ausrichtung in ganz CSS zu schaffen. Dieses Dokument beschreibt die allgemeinen Konzepte, die in der Spezifikation zu finden sind.
Hinweis: Die Dokumentation für jede Layoutmethode wird detailliert beschreiben, wie die Box-Ausrichtung dort angewendet wird.
Ältere Ausrichtungsmethoden
CSS hatte traditionell nur sehr begrenzte Möglichkeiten zur Ausrichtung. Wir konnten Text mit text-align
ausrichten, Blöcke mit automatischen margin
s 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.
Grundlegende Beispiele
Beispiel für Ausrichtung im CSS-Grid-Layout
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>
.box {
display: grid;
grid-template-columns: 120px 120px 120px;
align-items: start;
justify-content: space-between;
}
.box :first-child {
align-self: center;
}
Beispiel für Flexbox-Ausrichtung
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>
.box {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.box :first-child {
align-self: center;
}
Wichtige Konzepte und Terminologie
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.
Beziehung zu Schreibmodi
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.
Zwei Dimensionen der Ausrichtung
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:
Bei der Ausrichtung von Elementen auf der Block-Achse verwenden Sie die Eigenschaften, die mit align-
beginnen:
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
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
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.
Fallback-Ausrichtung
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.
Arten der Ausrichtung
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.
Schlüsselworthwerte der positionsbezogenen Ausrichtung
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 Flexboxflex-end
nur für Flexboxleft
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.
Baseline-Ausrichtung
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
.
Verteilte Ausrichtung
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.
Überlauf-Ausrichtung
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.
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 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:
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>
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px 2em;
}
.box :first-child {
align-self: center;
}
Hinweis: Die frühe Grid-Implementation enthielt -gap
-Eigenschaften mit dem Präfix grid-
. Alle Browser unterstützen jetzt die nicht-prefixed Eigenschaften, obwohl Sie die folgenden Legacy-Eigenschaften in Beispielen und Tutorials sehen können: grid-row-gap
, grid-column-gap
, und grid-gap
. Die prefixierten Versionen werden als Alias der unprefixierten beibehalten.
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.
Seiten, die die einzelnen Ausrichtungseigenschaften detailliert beschreiben
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: