Lastnost align-items

Lastnost align-items določa poravnavo elementov vzdolž prečne osi za fleks bloke in po navpični osi za mreže. Uporablja se za nadrejeni element.

Sintaksa

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

Vrednosti

Vrednost	Opis
`flex-start`	Bloki so pritisnjeni na začetek prečne (navpične) osi.
`flex-end`	Bloki so pritisnjeni na konec prečne (navpične) osi.
`center`	Bloki so postavljeni na sredino prečne (navpične) osi.
`baseline`	Elementi so poravnani po svoji osnovni črti. Osnovna črta - je namišljena črta, ki poteka po spodnjem robu znakov brez upoštevanja previsov, na primer pri črkah `'p'` in `'y'`.
`stretch`	Bloki so raztegnjeni in zasedejo ves razpoložljiv prostor po prečni osi, vendar se še vedno upoštevata `min-width` in `max-width`, če sta nastavljena. Če pa sta določeni širina in višina za elemente - bo `stretch` prezrt.

Privzeta vrednost: stretch.

Primer . Vrednost stretch

Trenutno je glavna os usmerjena od leve proti desni, po prečni osi pa so elementi raztegnjeni na celotno višino:

<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

Trenutno so za elemente določene širina in višina, zato bo vrednost stretch za lastnost align-items prezrta:

<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 brez dimenzij elementa

Trenutno bodo elementi pritisnjeni 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

Trenutno bodo elementi še vedno pritisnjeni na vrh, vendar bodo imeli določeno širino in višino:

<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

Trenutno bodo elementi pritisnjeni 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

Trenutno bodo elementi postavljeni na sredino prečne osi (v tem primeru navpično):

<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čnih velikosti

Trenutno imajo elementi različno velikost po višini (trenutno jih razpira besedilo, lahko pa nastavimo tudi height), širina je pri vseh enaka, ker je nastavljena lastnost 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čnih velikosti

Tako pa izgleda poravnava po osnovni črti:

<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 . Poravnava na začetek navpične osi v mreži

Poravnajmo naše elemente znotraj celic na začetek navpične 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;
}

Poglejmo si našo mrežo v brskalnikovem razvojnem orodju:

Primer . Poravnava na sredino navpične osi v mreži

Zdaj pa poravnajmo naše elemente v celicah na sredino navpične 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;
}

Poglejmo si prikaz mreže v razvojnem orodju:

Primer . Poravnava na konec navpične osi v mreži

Spet spremenimo poravnavo elementov, tole krat na konec navpične 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 {
	
}

Poglejmo si kako izgleda naša mreža skozi razvojno orodje:

Glejte tudi

lastnost flex-direction,
ki določa smer osi fleks blokov
lastnost justify-content,
ki določa poravnavo po glavni osi
lastnost align-items,
ki določa poravnavo po prečni osi
lastnost flex-wrap,
ki večvrstičnost fleks blokov
lastnost flex-flow,
okrajšava za flex-direction in flex-wrap
lastnost order,
ki določa vrstni red fleks blokov
lastnost align-self,
ki določa poravnavo enega bloka
lastnost flex-basis,
ki določa velikost posameznega fleks bloka
lastnost flex-grow,
ki določa požrešnost fleks blokov
lastnost flex-shrink,
ki določa skrčljivost fleks blokov
lastnost flex,
okrajšava za flex-grow, flex-shrink in flex-basis