Omadus align-items

Omadus align-items määrab elementide joondamise põiktelje suunas flex konteinerite puhul ja vertikaaltelje suunas grid'i puhul. Rakendub vanemelemendile.

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`flex-start`	Blokid on surutud põiktelje (vertikaalse) algusesse.
`flex-end`	Blokid on surutud põiktelje (vertikaalse) lõppu.
`center`	Blokid asuvad põiktelje (vertikaalse) keskel.
`baseline`	Elemendid joonduvad vastavalt oma baasjoonele. Baasjoon on kujutletav joon, mis kulgeb sümbolite alumise serva all arvestamata allapoole ulatuvaid osi, nagu näiteks tähtedel `'p'` ja `'y'`.
`stretch`	Blokid on venitatud, hõivates kogu põiktelje suunas saadaoleva ruumi, kuid arvestatakse siiski `min-width` ja `max-width`, kui need on määratud. Kui aga on määratud laius ja kõrgus elementidele - `stretch` ignoreeritakse.

Vaikeväärtus: stretch.

Näide . Väärtus stretch

Praegu on põhitelg suunatud vasakult paremale, ja põiktelje suunas on elemendid venitatud kogu kõrgusele:

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

Näide . Väärtus stretch + elemendi mõõtmed

Praegu on elementidele määratud laius ja kõrgus, seetõttu väärtust stretch omadusele align-items ignoreeritakse:

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

Näide . Väärtus flex-start ilma elemendi mõõtmeteta

Praegu surutakse elemendid ülespoole:

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

Näide . Väärtus flex-start + elemendi mõõtmed

Praegu surutakse elemendid endiselt ülespoole, kuid neil on määratud laius ja kõrgus:

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

Näide . Väärtus flex-end + elemendi mõõtmed

Praegu surutakse elemendid allapoole:

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

Näide . Väärtus center + elemendi mõõtmed

Praegu asuvad elemendid põiktelje keskel (antud juhul vertikaalselt):

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

Näide . Väärtus center, erineva suurusega elemendid

Praegu on elementidel erinev kõrgus (praegu muudab nende suurust tekst, kuid võib määrata ka height), laius on kõigil sama, kuna on määratud omadus width:

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

Näide . Väärtus baseline, erineva suurusega elemendid

Ja nii näeb välja joondamine baasjoone järgi:

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

Näide . Joondamine vertikaaltelje algusesse grid'is

Joondame oma elemendid lahtrites vertikaaltelje algusesse:

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

Ja vaatame nüüd oma grid'i brauseri silumisvahendis:

Näide . Joondamine vertikaaltelje keskel grid'is

Ja nüüd joondame oma elemendid lahtrites vertikaaltelje keskel:

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

Vaatame grid'i kuvamist silumisvahendis:

Näide . Joondamine vertikaaltelje lõppu grid'is

Muudame uuesti elementide joondamist, seekord vertikaaltelje lõppu:

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

Ja vaatame nüüd kuidas näeb välja meie grid silumisvahendi kaudu:

Vaata ka

omadus flex-direction,
mis määrab flex konteinerite telgede suuna
omadus justify-content,
mis määrab joondamise põhitelje suunas
omadus align-items,
mis määrab joondamise põiktelje suunas
omadus flex-wrap,
mis määrab flex konteinerite mitmerealise paigutuse
omadus flex-flow,
lühend flex-direction ja flex-wrap jaoks
omadus order,
mis määrab flex elementide järjestuse
omadus align-self,
mis määrab üksiku elemendi joondamise
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