Eigenschaft justify-content

Die Eigenschaft justify-content legt die Ausrichtung der Elemente entlang der Hauptachse für Flex-Container und entlang der horizontalen Achse für Grid-Container fest. Wird auf das übergeordnete Element angewendet.

Syntax

Selektor {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Werte

Wert	Beschreibung
`flex-start`	Die Blöcke sind an den Anfang der Hauptachse (horizontalen Achse) gedrückt.
`flex-end`	Die Blöcke sind an das Ende der Hauptachse (horizontalen Achse) gedrückt.
`center`	Die Blöcke sind in der Mitte der Hauptachse (horizontalen Achse) zentriert.
`space-between`	Die Blöcke sind entlang der Hauptachse (horizontalen Achse) verteilt, wobei das erste Element an den Anfang der Achse gedrückt ist und das letzte an das Ende.
`space-around`	Die Blöcke sind entlang der Hauptachse (horizontalen Achse) verteilt, wobei zwischen dem ersten Block und dem Anfang der Achse sowie zwischen dem letzten Block und dem Ende der Achse der gleiche Abstand ist, wie zwischen den restlichen Blöcken. Allerdings sind sie nicht gleich, wie es scheinen könnte: Die Abstände summieren sich und zwischen zwei Blöcken ist der Abstand doppelt so groß wie zwischen einem Block und dem Anfang/Ende der Achse.

Standardwert: flex-start.

Beispiel . Wert flex-start

Die Achse verläuft aktuell von links nach rechts (dies bewirkt flex-direction: row), und die Blöcke sind an die linke Seite gedrückt:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel . Wert flex-end

In diesem Beispiel verläuft die Achse ebenfalls von links nach rechts, aber die Blöcke sind an die rechte Seite gedrückt, da justify-content auf den Wert flex-end gesetzt ist:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel . Wert center

Aktuell werden die Blöcke in der Mitte zentriert, unabhängig von der Richtung der Hauptachse:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel . Wert space-between

Die Blöcke sind entlang der Hauptachse verteilt, wobei das erste Element an den Anfang der Achse gedrückt ist und das letzte an das Ende:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel . Wert space-around

Die Blöcke sind entlang der Hauptachse verteilt, wobei zwischen dem ersten Block und dem Anfang der Achse, dem letzten Block und dem Ende der Achse der gleiche Abstand ist, wie zwischen den restlichen Blöcken. Allerdings summieren sich die Abstände und zwischen zwei Blöcken ist der Abstand doppelt so groß wie zwischen einem Block und dem Anfang/Ende der Achse:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel . Wert center. Achse nach unten

Wir ändern die Richtung der Hauptachse, indem wir flex-direction auf den Wert column setzen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel . Wert space-between. Achse nach unten

Aktuell verteilen sich die Blöcke gleichmäßig entlang der Vertikalen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel . Ausrichtung am Anfang der horizontalen Achse (Zeilen) im Grid

Lassen Sie uns die Ausrichtung unserer Elemente am Anfang der horizontalen Achse einstellen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Beispiel . Ausrichtung in der Mitte der horizontalen Achse im Grid

Stellen wir nun die Ausrichtung unserer Elemente in der Mitte der horizontalen Achse ein:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Beispiel . Ausrichtung am Ende der horizontalen Achse im Grid

Lassen Sie uns die Ausrichtung unserer Elemente am Ende der horizontalen Achse einstellen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Siehe auch

die Eigenschaft flex-direction,
die die Richtung der Achsen von Flex-Containern festlegt
die Eigenschaft align-items,
die die Ausrichtung entlang der Querachse festlegt
die Eigenschaft flex-wrap,
die die Umbrüche von Flex-Containern festlegt
die Eigenschaft flex-flow,
Kurzschreibweise für flex-direction und flex-wrap
die Eigenschaft order,
die die Reihenfolge von Flex-Elementen festlegt
die Eigenschaft align-self,
die die Ausrichtung eines einzelnen Elements festlegt
die Eigenschaft flex-basis,
die die Größe eines bestimmten Flex-Elements festlegt
die Eigenschaft flex-grow,
die das Wachstumsverhalten von Flex-Elementen festlegt
die Eigenschaft flex-shrink,
die das Schrumpfverhalten von Flex-Elementen festlegt
die Eigenschaft flex,
Kurzschreibweise für flex-grow, flex-shrink und flex-basis