Vlastnosť align-items

Vlastnosť align-items nastavuje zarovnanie prvkov pozdĺž priečnej osi pre flex kontajnery a pozdĺž vertikálnej osi pre gridy. Aplikuje sa na nadradený prvok.

Syntax

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

Hodnoty

Hodnota	Popis
`flex-start`	Bloky sú pritlačené k začiatku priečnej (vertikálnej) osi.
`flex-end`	Bloky sú pritlačené ku koncu priečnej (vertikálnej) osi.
`center`	Bloky sú umiestnené v strede priečnej (vertikálnej) osi.
`baseline`	Prvky sú zarovnané podľa svojej základnej línie. Základná línia - je imaginárna čiara prechádzajúca pozdĺž spodného okraja znakov bez zohľadnenia zvislých výbežkov, ako napríklad u písmen `'p'` a `'y'`.
`stretch`	Bloky sú roztiahnuté, zaberajú 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 prvky - `stretch` bude ignorovaný.

Predvolená hodnota: stretch.

Príklad . Hodnota stretch

Teraz je hlavná os smerovaná zľava doprava, a pozdĺž priečnej osi sú prvky roztiahnuté na celú výšku:

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

Príklad . Hodnota stretch + rozmery prvku

Teraz je pre prvky nastavená šírka a výška, preto bude hodnota stretch pre vlastnosť align-items ignorovaná:

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

Príklad . Hodnota flex-start bez rozmerov prvku

Teraz budú prvky pritlačené k hornej časti:

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

Príklad . Hodnota flex-start + rozmery prvku

Teraz budú prvky stále pritlačené k hornej časti, avšak budú mať nastavenú šírku a výšku:

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

Príklad . Hodnota flex-end + rozmery prvku

Teraz budú prvky pritlačené k dolnej časti:

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

Príklad . Hodnota center + rozmery prvku

Teraz budú prvky umiestnené v strede pozdĺž priečnej osi (v tomto prípade vertikálne):

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

Príklad . Hodnota center, prvky rôznej veľkosti

Teraz majú prvky rôznu veľkosť podľa výšky (teraz sú rozťahované textom, ale možno nastaviť aj height), šírka je u všetkých rovnaká, pretože je nastavená vlastnosť 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;
}

Príklad . Hodnota baseline, prvky rôznej veľkosti

A takto vyzerá zarovnanie podľa základnej línie:

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

Príklad . Zarovnanie podľa začiatku vertikálnej osi v gride

Zarovnajme naše prvky vo vnútri buniek podľa začiatku vertikálnej osi:

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

A teraz sa pozrime na náš grid v prehliadači:

Príklad . Zarovnanie podľa stredu vertikálnej osi v gride

A teraz zarovnajme naše prvky v bunkách podľa stredu vertikálnej osi:

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

Pozrime sa na zobrazenie gridu v prehliadači:

Príklad . Zarovnanie podľa konca vertikálnej osi v gride

Zmeňme znova zarovnanie prvkov, tentoraz podľa konca vertikálnej osi:

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

A teraz sa pozrime, ako vyzerá náš grid v prehliadači:

Pozri tiež

vlastnosť flex-direction,
ktorá nastavuje smer osí flex kontajnerov
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 kontajnerov
vlastnosť flex-flow,
skratka pre flex-direction a flex-wrap
vlastnosť order,
ktorá nastavuje poradie flex prvkov
vlastnosť align-self,
ktorá nastavuje zarovnanie jedného prvku
vlastnosť flex-basis,
ktorá nastavuje veľkosť konkrétneho flex prvku
vlastnosť flex-grow,
ktorá nastavuje schopnosť flex prvku rásť
vlastnosť flex-shrink,
ktorá nastavuje schopnosť flex prvku zmenšovať sa
vlastnosť flex,
skratka pre flex-grow, flex-shrink a flex-basis