Omadus align-self

Omadus align-self määrab joonduse põiktelje suhtes üksikule flex-elemendile ja vertikaaltelje suhtes üksikule elemendile gridis. Põhimõtteliselt esindab see omadus omadust align-items, kuid konkreetse elemendi jaoks.

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`flex-start`	Element on surutud põiktelje algusesse.
`flex-end`	Element on surutud põiktelje lõppu.
`center`	Element asub põiktelje keskel.
`baseline`	Element joondatakse vastavalt oma baasjoonele. Baasjoon on kujutletav joon, mis kulgeb sümbolite alumise serva all, arvestamata allapoole ulatuvaid osi, nagu näiteks tähtedel `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Element on venitatud, hõivates kogu põiktelje suhtes saadaoleva ruumi, kuid arvestatakse siiski `min-width` ja `max-width`, kui need on määratud. Kui aga elemendi jaoks on määratud laius ja kõrgus - `stretch` eiratakse.
`auto`	Element joondatakse nii, nagu on määratud omaduses `align-items`.

Vaikeväärtus: auto.

Näide . Väärtus stretch

Selles näites on kõikidele elementidele määratud väärtus flex-start (omadus align-items), kuid kolmandale elemendile - align-self väärtusega 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;
}

Näide . Väärtus flex-end

Selles näites on kõikidele elementidele omaduse align-items jaoks määratud väärtus flex-start, kuid kolmandale elemendile - align-self väärtusega 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;
}

Näide . Joondamine vertikaaltelje alguse suhtes gridis

Määrame esimese elemendi joonduse vertikaaltelje alguse suhtes:

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

Näide . Joondamine vertikaaltelje keskpunkti suhtes gridis

Määrame esimese elemendi joonduse vertikaaltelje keskpunkti suhtes:

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

Näide . Joondamine vertikaaltelje lõpu suhtes gridis

Määrame oma esimese elemendi gridis joonduse vertikaaltelje lõpu suhtes:

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

Vaata ka

omadus flex-direction,
mis määrab flex-elementide telgede suuna
omadus justify-content,
mis määrab joonduse põhitelje suhtes
omadus align-items,
mis määrab joonduse põiktelje suhtes
omadus flex-wrap,
mis määrab flex-elementide mitmerealise paigutuse
omadus flex-flow,
lühend flex-direction ja flex-wrap jaoks
omadus order,
mis määrab flex-elementide järjestuse
omadus flex-basis,
mis määrab konkreetse flex-elemendi suuruse
omadus flex-grow,
mis määrab flex-elementide "ahneuse"
omadus flex-shrink,
mis määrab flex-elementide kokkutõmbumise
omadus flex,
lühend flex-grow, flex-shrink ja flex-basis jaoks