Eigenschaft align-items

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

Syntax

Selektor {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

Werte

Wert	Beschreibung
`flex-start`	Die Blöcke sind an den Anfang der Querachse (vertikal) gedrückt.
`flex-end`	Die Blöcke sind an das Ende der Querachse (vertikal) gedrückt.
`center`	Die Blöcke sind in der Mitte der Querachse (vertikal) zentriert.
`baseline`	Elemente werden an ihrer Grundlinie ausgerichtet. Die Grundlinie ist eine imaginäre Linie, die entlang der Unterkante der Zeichen verläuft, ohne Überhänge zu berücksichtigen, wie zum Beispiel bei den Buchstaben `'p'` und `'y'`.
`stretch`	Blöcke werden gestreckt und nehmen den gesamten verfügbaren Platz entlang der Querachse ein, wobei jedoch `min-width` und `max-width` berücksichtigt werden, falls gesetzt. Wenn Breite und Höhe für Elemente festgelegt sind, wird `stretch` ignoriert.

Standardwert: stretch.

Beispiel . Wert stretch

Die Hauptachse verläuft aktuell von links nach rechts, und entlang der Querachse sind die Elemente auf die gesamte Höhe gestreckt:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Beispiel . Wert stretch + Elementgrößen

Aktuell sind Breite und Höhe für die Elemente festgelegt, daher wird der Wert stretch für die Eigenschaft align-items ignoriert:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel . Wert flex-start ohne Elementgrößen

Aktuell werden die Elemente an den oberen Rand gedrückt:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Beispiel . Wert flex-start + Elementgrößen

Aktuell werden die Elemente weiterhin an den oberen Rand gedrückt, jedoch haben sie eine festgelegte Breite und Höhe:

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

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

Beispiel . Wert flex-end + Elementgrößen

Aktuell werden die Elemente an den unteren Rand gedrückt:

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

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

Beispiel . Wert center + Elementgrößen

Aktuell sind die Elemente entlang der Querachse (zentriert (in diesem Fall vertikal):

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

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

Beispiel . Wert center, Elemente unterschiedlicher Größe

Aktuell haben die Elemente eine unterschiedliche Höhe (sie werden aktuell durch den Text vergrößert, aber man könnte auch height setzen), die Breite ist für alle gleich, da die Eigenschaft width gesetzt ist:

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

Beispiel . Wert baseline, Elemente unterschiedlicher Größe

So sieht die Ausrichtung an der Grundlinie aus:

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

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

Beispiel . Ausrichtung am Anfang der vertikalen Achse im Grid

Lassen Sie uns unsere Elemente innerhalb der Zellen am Anfang der vertikalen Achse ausrichten:

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

#parent {
	display: grid;
	align-items: flex-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;
}

Schauen wir uns nun unser Grid im Browser-Debugger an:

Beispiel . Ausrichtung in der Mitte der vertikalen Achse im Grid

Richten wir nun unsere Elemente in den Zellen in der Mitte der vertikalen Achse aus:

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

#parent {
	display: grid;
	align-items: 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;
}

Sehen wir uns die Darstellung des Grids im Debugger an:

Beispiel . Ausrichtung am Ende der vertikalen Achse im Grid

Ändern wir erneut die Ausrichtung der Elemente, diesmal an das Ende der vertikalen Achse:

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

#parent {
	display: grid;
	align-items: 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;
}
#elem1 {
	
}

Sehen wir uns nun an, wie unser Grid im Debugger aussieht:

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 den Umbruch von Flex-Containern festlegt
Eigenschaft flex-flow,
Kurzschreibweise für flex-direction und flex-wrap
Eigenschaft order,
die die Reihenfolge von Flex-Elementen festlegt
Eigenschaft align-self,
die die Ausrichtung eines einzelnen Elements festlegt
Eigenschaft flex-basis,
die die Größe eines bestimmten Flex-Elements festlegt
Eigenschaft flex-grow,
die das Wachstumsverhalten von Flex-Elementen festlegt
Eigenschaft flex-shrink,
die die Schrumpffähigkeit von Flex-Elementen festlegt
Eigenschaft flex,
Kurzschreibweise für flex-grow, flex-shrink und flex-basis