Eigenschaft align-self

Die Eigenschaft align-self legt die Ausrichtung entlang der Querachse für einen einzelnen Flex-Block und entlang der vertikalen Achse für ein einzelnes Element im Grid fest. Im Wesentlichen stellt diese Eigenschaft die Eigenschaft align-items dar, aber für einen bestimmten Block.

Syntax

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

Werte

Wert	Beschreibung
`flex-start`	Der Block wird an den Anfang der Querachse ausgerichtet.
`flex-end`	Der Block wird an das Ende der Querachse ausgerichtet.
`center`	Der Block wird in der Mitte der Querachse zentriert.
`baseline`	Der Block wird an seiner 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'`, `'q'`, `'y'`, `'g'`.
`stretch`	Der Block wird gedehnt und nimmt den gesamten verfügbaren Platz entlang der Querachse ein, wobei jedoch `min-width` und `max-width` berücksichtigt werden, falls diese gesetzt sind. Wenn jedoch Breite und Höhe für das Element festgelegt sind - wird `stretch` ignoriert.
`auto`	Der Block wird so ausgerichtet, wie es in der Eigenschaft `align-items` festgelegt ist.

Standardwert: auto.

Beispiel . Wert stretch

In diesem Beispiel ist für alle Blöcke der Wert flex-start gesetzt (Eigenschaft align-items), und für den dritten Block - align-self mit dem Wert stretch:

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

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

Beispiel . Wert flex-end

In diesem Beispiel ist für alle Blöcke für die Eigenschaft align-items der Wert flex-start gesetzt, und für den dritten Block - align-self mit dem Wert flex-end:

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

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

Beispiel . Ausrichtung am Anfang der vertikalen Achse im Grid

Lassen Sie uns die Ausrichtung für das erste Element am Anfang der vertikalen Achse setzen:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

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

Beispiel . Ausrichtung in der Mitte der vertikalen Achse im Grid

Lassen Sie uns die Ausrichtung des ersten Elements in der Mitte der vertikalen Achse setzen:

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

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

Beispiel . Ausrichtung am Ende der vertikalen Achse im Grid

Lassen Sie uns die Ausrichtung für unser erstes Element im Grid am Ende der vertikalen Achse setzen:

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

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

Siehe auch

Eigenschaft flex-direction,
die die Richtung der Achsen von Flex-Blöcken 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-Blöcken festlegt
Eigenschaft flex-flow,
Kurzform für flex-direction und flex-wrap
Eigenschaft order,
die die Reihenfolge der Flex-Blöcke festlegt
Eigenschaft flex-basis,
die die Größe eines bestimmten Flex-Blocks festlegt
Eigenschaft flex-grow,
die die "Gier" der Flex-Blöcke festlegt
Eigenschaft flex-shrink,
die die Schrumpfbarkeit der Flex-Blöcke festlegt
Eigenschaft flex,
Kurzform für flex-grow, flex-shrink und flex-basis