justify-content

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

Die CSS justify-content-Eigenschaft definiert, wie der Browser Platz zwischen und um Inhaltsobjekte entlang der Hauptachse eines Flex-Containers und der Inline-Achse von Grid- und Multicol-Containern verteilt.

Das interaktive Beispiel unten zeigt einige justify-content-Werte mit einem Grid-Layout.

Probieren Sie es aus

Syntax

css
/* Positional alignment */
justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: stretch;

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

Werte

start

Die Elemente werden bündig zueinander an den Start-Rand des Ausrichtungscontainers entlang der Hauptachse gepackt.

end

Die Elemente werden bündig zueinander an den End-Rand des Ausrichtungscontainers entlang der Hauptachse gepackt.

flex-start

Die Elemente werden bündig zueinander an den Start-Rand des Ausrichtungscontainers auf der Haupt-Start-Seite des Flex-Containers gepackt. Dies gilt nur für Objekte innerhalb eines Flex-Layouts. Bei Elementen, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie start behandelt.

flex-end

Die Elemente werden bündig zueinander an den End-Rand des Ausrichtungscontainers auf der Haupt-End-Seite des Flex-Containers gepackt. Dies gilt nur für Objekte innerhalb eines Flex-Layouts. Bei Elementen, die keine Kinder eines Flex-Containers sind, wird dieser Wert wie end behandelt.

center

Die Elemente werden bündig zueinander zum Zentrum des Ausrichtungscontainers entlang der Hauptachse ausgerichtet.

left

Die Elemente werden bündig zueinander an den linken Rand des Ausrichtungscontainers ausgerichtet. Wenn die horizontale Achse der Eigenschaft nicht parallel zur Inline-Achse liegt, wie z. B. bei flex-direction: column;, verhält sich dieser Wert wie start.

Die Elemente werden bündig zueinander an den rechten Rand des Ausrichtungscontainers in der jeweiligen Achse ausgerichtet. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse (in einem Grid-Container) oder der Hauptachse (in einem Flexbox-Container) ist, verhält sich dieser Wert wie start.

normal

Verhält sich wie stretch, außer bei Multicol-Containern mit einer nicht-auto column-width, in welchem Fall die Spalten ihre angegebene column-width annehmen, anstatt sich an den Container anzupassen. Da stretch sich in Flex-Containern wie start verhält, verhält sich normal ebenfalls wie start.

space-between

Die Elemente werden gleichmäßig entlang der Hauptachse innerhalb des Ausrichtungscontainers verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist identisch. Das erste Element ist bündig mit dem Haupt-Start-Rand und das letzte Element ist bündig mit dem Haupt-End-Rand.

space-around

Die Elemente werden gleichmäßig entlang der Hauptachse innerhalb des Ausrichtungscontainers verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist identisch. Der leere Raum vor dem ersten und nach dem letzten Element entspricht der Hälfte des Abstands zwischen jedem Paar benachbarter Elemente. Wenn es nur ein Element gibt, wird es zentriert.

space-evenly

Die Elemente werden gleichmäßig entlang der Hauptachse innerhalb des Ausrichtungscontainers verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente, dem Haupt-Start-Rand und dem ersten Element sowie dem Haupt-End-Rand und dem letzten Element ist jeweils gleich.

stretch

Wenn die kombinierte Größe der Elemente entlang der Hauptachse kleiner ist als die Größe des Ausrichtungscontainers, wird die Größe von auto-bemaßten Elementen gleichermaßen (nicht proportional) vergrößert, wobei die durch max-height/max-width (oder vergleichbare Funktionalitäten) auferlegten Einschränkungen respektiert werden, sodass die kombinierte Größe genau den Ausrichtungscontainer entlang der Hauptachse ausfüllt.

Hinweis: Für Flexbox-Layouts verhält sich der Wert stretch wie flex-start oder start. Dies liegt daran, dass das Strecken in Flexbox-Layouts durch die flex-grow-Eigenschaft gesteuert wird.

safe

Wenn das Element den Ausrichtungscontainer überläuft, wird das Element so ausgerichtet, als ob der Ausrichtungsmodus start wäre. Die gewünschte Ausrichtung wird nicht umgesetzt.

unsafe

Auch wenn das Element den Ausrichtungscontainer überläuft, wird die gewünschte Ausrichtung umgesetzt. Im Gegensatz zu safe, das die gewünschte Ausrichtung zugunsten der Vermeidung von Überläufen ignoriert.

Beschreibung

Definiert im CSS Box Alignment-Modul, gilt justify-content für Multicol-Container, Flex-Container und Grid-Container. Die Eigenschaft gilt nicht für Block-Container und hat dort keine Wirkung.

Diese Eigenschaft teilt sich viele Schlüsselwort-Werte mit der align-content-Eigenschaft, jedoch nicht alle! justify-content ist nicht an der Basislinien-Ausrichtung beteiligt und nimmt daher keine Basislinien-Werte an.

In Flex-Layouts definiert die Eigenschaft, wie positiver freier Raum zwischen oder um Flex-Items entlang der Hauptachse verteilt wird. Diese Eigenschaft wirkt sich auf den Raum zwischen den Elementen einer Zeile aus, nicht auf den Raum zwischen den Zeilen. Die Ausrichtung erfolgt, nachdem die Längen und automatischen Ränder angewendet wurden, was bedeutet, dass, wenn eines oder mehrere Flex-Items in einer Zeile einen flex-grow-Faktor größer als 0 haben, die Eigenschaft keine Wirkung hat, da kein Platz vorhanden ist, der auf diese Zeile verteilt werden kann. Außerdem, da das Strecken entlang der Hauptachse durch flex gesteuert wird, verhält sich der stretch-Wert wie flex-start.

Mit Grid-Layout verteilt diese Eigenschaft den verfügbaren Raum zwischen oder um die Grid-Spalten, nicht die Grid-Items. Wenn der Grid-Container größer ist als das Grid selbst, kann die justify-content-Eigenschaft verwendet werden, um das Grid entlang der Inline-Achse auszurichten und die Grid-Spalten zu justieren.

Grid-auto-Track-Größen (und nur auto-Track-Größen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher nimmt eine auto-bemaßte Spur standardmäßig jeden verbleibenden Platz im Raster-Container ein. Da die Inline-Größe des Grids kleiner sein muss als die Inline-Größe des Grid-Containers, damit Platz zum Verteilen vorhanden ist, hat die Eigenschaft in diesem Fall keine Wirkung.

Formale Definition

Anfangswertnormal
Anwendbar aufflexible Container
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

justify-content = 
normal |
<content-distribution> |
<overflow-position>? [ <content-position> | left | right ]

<content-distribution> =
space-between |
space-around |
space-evenly |
stretch

<overflow-position> =
unsafe |
safe

<content-position> =
center |
start |
end |
flex-start |
flex-end

Beispiele

Einfaches Grid-Beispiel

In diesem Beispiel haben wir ein Grid, das schmaler ist als sein Grid-Container, und verwenden justify-content, um den verfügbaren Platz gleichmäßig um und zwischen den Grid-Spalten zu verteilen.

HTML

Der <section>-Container, unser zukünftiger Grid-Container, enthält 16 verschachtelte <div>s, die zu Grid-Items werden.

html
<section class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
  <div>O</div>
  <div>P</div>
</section>

CSS

Wir setzen die Container-Breite auf 500px und legen drei Spalten fest, die jeweils 80px breit sind, was bedeutet, dass 260px an verfügbarem Platz zwischen oder um sie herum verteilt werden können. Wir verwenden dann justify-content: space-evenly, was bedeutet, dass es 65px Platz vor, zwischen und nach jeder Spalte gibt.

Wir setzen unterschiedliche Breiten (und Hintergrundfarben), um zu zeigen, wie die Justierung auf die Spalten angewendet wird.

css
.container {
  display: grid;
  grid: auto-flow / repeat(3, 80px);
  width: 500px;
  justify-content: space-evenly;
}

div {
  background-color: pink;
  width: 80px;
}

div:nth-of-type(n + 9) {
  width: 35px;
  background-color: lightgreen;
}

div:nth-last-of-type(3) {
  width: 250px;
  background-color: lightblue;
}

Ergebnis

Beachten Sie, dass justify-contents die Spalten ausrichtet und keinen Einfluss auf die Items oder die Ausrichtung innerhalb der Grid-Bereiche hat. Grid-Items, selbst solche, die ihre Rasterzelle überschreiten, haben keinen Einfluss auf die Spaltenausrichtung.

Das Schlüsselwort safe

Dieses Beispiel demonstriert das Schlüsselwort safe. Wir geben vier zentrierte Flex-Items an, die nicht umbrechen dürfen und daher ihren einzeiligen Flex-Container überlaufen. Durch Hinzufügen von safe zu center in der justify-content-Eigenschaft verhält sich überlaufender Inhalt so, als wäre der Ausrichtungsmodus start.

Der Container wird auf center gesetzt, wobei jeder Container außer dem ersten das Schlüsselwort safe hinzugefügt bekommt:

css
.container {
  align-items: baseline;
  display: flex;
  width: 350px;
  height: 2em;
}

.safe {
  justify-content: center;
}

.safe-center {
  justify-content: safe center;
}

div {
  flex: 0 0 100px;
}

Ergebnis

Wenn ein Element den Ausrichtungscontainer überläuft, verhält sich der Ausrichtungsmodus mit safe wie start und die center-Ausrichtung wird nicht umgesetzt. Das Schlüsselwort safe hat keine Wirkung, wenn die Items den Container nicht überlaufen.

Visualisierung der Verteilung von Flex-Items

Dieses Beispiel enthält ein mehrzeiliges, umbrochenes Flex-Layout. Das zweite Flex-Item hat einen positiven Flex-Wachstumsfaktor und nimmt den gesamten verfügbaren freien Platz in der ersten Flex-Zeile ein.

CSS

css
#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between; /* Can be changed in the live sample */
  width: 510px;
}

div {
  line-height: 2em;
  flex: 0 0 120px;
  background-color: pink;
}

div:nth-of-type(2) {
  flex-grow: 1;
  background-color: yellow;
}

div:nth-of-type(n + 9) {
  flex: 0 0 35px;
  background-color: lightgreen;
}
div:last-of-type {
  flex: 0 0 300px;
  background-color: lightblue;
}

Ergebnis

Wählen Sie verschiedene Schlüsselwörter aus dem Dropdown-Menü, um die verschiedenen justify-content-Schlüsselwortwerte zu visualisieren. Da ein Element in der ersten Zeile wachsen kann, gibt es keinen verfügbaren Platz in dieser Zeile, den die justify-content-Eigenschaft verteilen könnte. Beim Wert space-between ist das erste Element jeder Zeile bündig mit dem Haupt-Start-Rand und das letzte Element bündig mit dem Haupt-End-Rand. Infolgedessen wird eine Zeile mit nur einem Item mit dem Haupt-Start-Rand ausgerichtet (wie in der letzten Zeile zu sehen). Dies ist bei anderen space-*-Werten wie space-evenly und space-around, die einzeilige Flex-Zeilen zentrieren, nicht der Fall.

Spezifikationen

Specification
CSS Box Alignment Module Level 3
# align-justify-content
CSS Flexible Box Layout Module Level 1
# justify-content-property

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
justify-content
Supported in Flex Layout
left and right
safe and unsafe
flex_context.space-evenly
start and end
flex_context.stretch
Supported in Grid Layout

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch