Eigenschaft align-content

Die Eigenschaft align-content legt die Ausrichtung der Elemente entlang der Querachse für Flex-Container und entlang der Vertikalachse für Grids fest. Wird auf das übergeordnete Element angewendet.

Syntax

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

Werte

Wert	Beschreibung
`flex-start`	Die Blöcke sind am Anfang der Quer- (Vertikal-) Achse ausgerichtet.
`flex-end`	Die Blöcke sind am Ende der Quer- (Vertikal-) Achse ausgerichtet.
`center`	Die Blöcke sind in der Mitte der Quer- (Vertikal-) Achse zentriert.
`space-between`	Die Blöcke sind entlang der Quer- (Vertikal-) Achse verteilt, wobei das erste Element am Anfang der Achse ausgerichtet ist und das letzte - am Ende.
`space-around`	Die Blöcke sind entlang der Quer- (Vertikal-) 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 besteht wie zwischen den übrigen Blöcken. Sie sind jedoch nicht gleich, wie es scheinen könnte: Die Abstände addieren sich und zwischen zwei Blöcken ist der Abstand doppelt so groß wie zwischen einem Block und dem Anfang/Ende der Achse.

Beispiel . Wert flex-start

In diesem Beispiel ist die Achse, entlang der die Ausrichtung erfolgt, von oben nach unten gerichtet, d.h. sie ist die Querachse. Wie im Ergebnis zu sehen ist, sind alle unsere Elemente an ihrem oberen Teil ausgerichtet:

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel . Wert flex-end

In diesem Beispiel sind die Blöcke an der unteren Seite der Querachse ausgerichtet, da die Eigenschaft align-content auf den Wert flex-end gesetzt ist:

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel . Wert center

Jetzt sind die Blöcke in der Mitte der Querachse zentriert:

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

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Ausrichtung am Anfang der Vertikalachse im Grid

Lassen Sie uns die Ausrichtung unserer Elemente im Grid am Anfang der Vertikalachse einstellen:

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

#parent {
	display: grid;
	align-content: start;
	grid-template-columns: 100px 100px;
	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;
}

Ausrichtung in der Mitte der Vertikalachse im Grid

Lassen Sie uns jetzt die Ausrichtung der Elemente in der Mitte der Vertikalachse einstellen:

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

#parent {
	display: grid;
	align-content: center;
	grid-template-columns: 100px 100px;
	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;
}

Ausrichtung am Ende der Vertikalachse im Grid

Lassen Sie uns die Ausrichtung der Elemente am Ende der Vertikalachse einstellen:

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

#parent {
	display: grid;
	align-content: end;
	grid-template-columns: 100px 100px;
	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

Eigenschaft flex-direction,
die die Richtung der Achsen von Flex-Containern festlegt
Eigenschaft justify-content,
die die Ausrichtung entlang der Hauptachse festlegt
Eigenschaft align-items,
die die Ausrichtung entlang der Querachse festlegt
Eigenschaft flex-wrap,
die die Mehrzeiligkeit von Flex-Containern festlegt
Eigenschaft flex-flow,
Kurzschreibweise für flex-direction und flex-wrap
Eigenschaft order,
die die Reihenfolge von Flex-Blöcken festlegt
Eigenschaft align-self,
die die Ausrichtung eines einzelnen Blocks festlegt
Eigenschaft place-content,
die die Ausrichtung entlang der Haupt- und Querachse festlegt