Vlastnosť align-self

Vlastnosť align-self nastavuje zarovnanie pozdĺž priečnej osi pre jednotlivý flex-blok a pozdĺž vertikálnej osi pre jednotlivý prvok v gride. V podstate táto vlastnosť predstavuje vlastnosť align-items, ale pre konkrétny blok.

Syntax

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

Hodnoty

Hodnota	Popis
`flex-start`	Blok je pritlačený k začiatku priečnej osi.
`flex-end`	Blok je pritlačený ku koncu priečnej osi.
`center`	Blok je umiestnený v strede priečnej osi.
`baseline`	Blok je zarovnaný podľa svojej základnej línie. Základná línia je imaginárna línia, prechádzajúca pozdĺž spodného okraja znakov bez zohľadnenia previsov, napríklad ako u písmen `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Blok je roztiahnutý, zaberá všetok dostupný priestor pozdĺž priečnej osi, pričom sa však berú do úvahy `min-width` a `max-width`, ak sú nastavené. Ak je nastavená šírka a výška pre prvok - `stretch` bude ignorovaný.
`auto`	Blok bude zarovnaný tak, ako je nastavené vo vlastnosti `align-items`.

Predvolená hodnota: auto.

Príklad . Hodnota stretch

V tomto príklade je všetkým blokom nastavená hodnota flex-start (vlastnosť align-items), a tretiemu bloku - align-self s hodnotou 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;
}

Príklad . Hodnota flex-end

V tomto príklade je všetkým blokom pre vlastnosť align-items nastavená hodnota flex-start, a tretiemu bloku - align-self s hodnotou 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;
}

Príklad . Zarovnanie na začiatok vertikálnej osi v gride

Nastavme zarovnanie pre prvý prvok na začiatok vertikálnej osi:

<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;
}

Príklad . Zarovnanie na stred vertikálnej osi v gride

Nastavme zarovnanie prvého prvku na stred vertikálnej osi:

<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;
}

Príklad . Zarovnanie na koniec vertikálnej osi v gride

Nastavme zarovnanie pre náš prvý prvok v gride na koniec vertikálnej osi:

<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;
}

Pozri tiež

vlastnosť flex-direction,
ktorá nastavuje smer osí flex blokov
vlastnosť justify-content,
ktorá nastavuje zarovnanie pozdĺž hlavnej osi
vlastnosť align-items,
ktorá nastavuje zarovnanie pozdĺž priečnej osi
vlastnosť flex-wrap,
ktorá nastavuje viacriadkovosť flex blokov
vlastnosť flex-flow,
skratka pre flex-direction a flex-wrap
vlastnosť order,
ktorá nastavuje poradie flex blokov
vlastnosť flex-basis,
ktorá nastavuje veľkosť konkrétneho flex bloku
vlastnosť flex-grow,
ktorá nastavuje "hladovosť" flex blokov
vlastnosť flex-shrink,
ktorá nastavuje stlačiteľnosť flex blokov
vlastnosť flex,
skratka pre flex-grow, flex-shrink a flex-basis