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
/* 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 wiestart
. right
-
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 angegebenecolumn-width
annehmen, anstatt sich an den Container anzupassen. Dastretch
sich in Flex-Containern wiestart
verhält, verhält sichnormal
ebenfalls wiestart
. 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 durchmax-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
wieflex-start
oderstart
. Dies liegt daran, dass das Strecken in Flexbox-Layouts durch dieflex-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
Anfangswert | normal |
---|---|
Anwendbar auf | flexible Container |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
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.
<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.
.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:
.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
#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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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.