Svojstvo align-items

Svojstvo align-items zadaje poravnanje elemenata duž poprečne ose za flex blokove i po vertikalnoj osi za gridove. Primeri se na roditeljski element.

Sintaksa

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

Vrednosti

Vrednost	Opis
`flex-start`	Blokovi su pritisnuti na početak poprečne (vertikalne) ose.
`flex-end`	Blokovi su pritisnuti na kraj poprečne (vertikalne) ose.
`center`	Blokovi stoje u centru poprečne (vertikalne) ose.
`baseline`	Elementi se poravnavaju po svojoj osnovnoj liniji. Osnovna linija je zamišljena linija koja prolazi kroz donji rub simbola bez obzira na izlive, na primer, kao kod slova `'p'` i `'y'`.
`stretch`	Blokovi su rastegnuti, zauzimajući sav dostupan prostor po poprečnoj osi, pri čemu se ipak uzimaju u obzir `min-width` i `max-width`, ako su zadati. Ako su zadate širina i visina za elemente - `stretch` biće ignorisan.

Podrazumevana vrednost: stretch.

Primer . Vrednost stretch

Sada je glavna osa usmerena s leva na desno, a po poprečnoj osi elementi su rastegnuti na celu visinu:

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

Primer . Vrednost stretch + dimenzije elementa

Sada je za elemente zadata širina i visina, pa će vrednost stretch za svojstvo align-items biti ignorisana:

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

Primer . Vrednost flex-start bez dimenzija elementa

Sada će elementi biti pritisnuti na vrh:

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

Primer . Vrednost flex-start + dimenzije elementa

Sada će elementi i dalje biti pritisnuti na vrh, ali će imati zadanu širinu i visinu:

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

Primer . Vrednost flex-end + dimenzije elementa

Sada će elementi biti pritisnuti na dno:

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

Primer . Vrednost center + dimenzije elementa

Sada će elementi stajati u centru po poprečnoj osi (u ovom slučaju vertikalno):

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

Primer . Vrednost center, elementi različite veličine

Sada elementi imaju različitu visinu (sada se šire tekstom, ali može se zadati i height), širina je ista za sve, pošto je zadato svojstvo 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;
}

Primer . Vrednost baseline, elementi različite veličine

A ovako izgleda poravnanje po osnovnoj liniji:

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

Primer . Poravnanje po početku vertikalne ose u gridu

Hajde da poravnamo naše elemente unutar ćelija po početku vertikalne ose:

<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 sada pogledajmo naš grid u brauzer debageru:

Primer . Poravnanje po centru vertikalne ose u gridu

A sada poravnajmo naše elemente u ćelijama po centru vertikalne ose:

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

Hajde da pogledamo prikaz grida u debageru:

Primer . Poravnanje po kraju vertikalne ose u gridu

Ponovo ćemo promeniti poravnanje elemenata, ovog puta po kraju vertikalne ose:

<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 sada pogledajmo kako izgleda naš grid preko debagera:

Pogledajte takođe

svojstvo flex-direction,
koje zadaje smer osa flex blokova
svojstvo justify-content,
koje zadaje poravnanje po glavnoj osi
svojstvo align-items,
koje zadaje poravnanje po poprečnoj osi
svojstvo flex-wrap,
koje višelinijskost flex blokova
svojstvo flex-flow,
skraćenica za flex-direction i flex-wrap
svojstvo order,
koje zadaje redosled flex blokova
svojstvo align-self,
koje zadaje poravnanje jednog bloka
svojstvo flex-basis,
koje zadaje veličinu određenog flex bloka
svojstvo flex-grow,
koje zadaje gramzivost flex blokova
svojstvo flex-shrink,
koje zadaje sabijivost flex blokova
svojstvo flex,
skraćenica za flex-grow, flex-shrink i flex-basis