Savybė align-items

Savybė align-items nurodo elementų lygiavimą išilgai skersinės ašies flex blokams ir išilgai vertikalios ašies gardams. Taikoma tėviniam elementui.

Sintaksė

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

Reikšmės

Reikšmė	Aprašas
`flex-start`	Blokai prispausiami prie skersinės (vertikalios) ašies pradžios.
`flex-end`	Blokai prispausiami prie skersinės (vertikalios) ašies pabaigos.
`center`	Blokai išdėstomi skersinės (vertikalios) ašies centre.
`baseline`	Elementai lygiuojami pagal savo bazinę liniją. Bazinė linija - tai įsivaizduojama linija, einanti išilgai apatinio krašto simbolių neatsižvelgiant į išsikišimus, pavyzdžiui, kaip raidžių `'p'` ir `'y'`.
`stretch`	Blokai ištemiami, užimant visą prieinamą vietą išilgai skersinės ašies, tačiau vis tiek atsižvelgiama į `min-width` ir `max-width`, jei jos nustatytos. Jei nustatytas elemento plotis ir aukštis - `stretch` bus ignoruojamas.

Numatytoji reikšmė: stretch.

Pavyzdys . Reikšmė stretch

Dabar pagrindinė ašis nukreipta iš kairės į dešinę, o išilgai skersinės ašies elementai ištemiami per visą aukštį:

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

Pavyzdys . Reikšmė stretch + elemento matmenys

Dabar elementams nustatytas plotis ir aukštis, todėl reikšmė stretch savybei align-items bus ignoruojama:

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

Pavyzdys . Reikšmė flex-start be elemento matmenų

Dabar elementai bus prispausiami prie viršaus:

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

Pavyzdys . Reikšmė flex-start + elemento matmenys

Dabar elementai vis tiek bus prispausiami prie viršaus, tačiau jie turės nustatytą plotį ir aukštį:

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

Pavyzdys . Reikšmė flex-end + elemento matmenys

Dabar elementai bus prispausiami prie apačios:

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

Pavyzdys . Reikšmė center + elemento matmenys

Dabar elementai bus išdėstyti centre išilgai skersinės ašies (šiuo atveju vertikaliai):

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

Pavyzdys . Reikšmė center, skirtingų dydžių elementai

Dabar elementai turi skirtingą aukštį (dabar jie išsiplečia dėl teksto, bet galima nustatyti ir height), plotis visiems vienodas, kadangi nustatyta savybė 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;
}

Pavyzdys . Reikšmė baseline, skirtingų dydžių elementai

O taip atrodo lygiavimas pagal bazinę liniją:

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

Pavyzdys . Lygiavimas pagal vertikalios ašies pradžią garde

Išlyginkime savo elementus langeliuose pagal vertikalios ašies pradžią:

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

O dabar pažiūrėkime į mūsų gardą naršyklės žvalgyklėje:

Pavyzdys . Lygiavimas vertikalios ašies centre garde

O dabar išlyginkime savo elementus langeliuose vertikalios ašies centre:

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

Pažiūrėkime, kaip atrodo gardas žvalgyklėje:

Pavyzdys . Lygiavimas pagal vertikalios ašies pabaigą garde

Vėl pakeiskime elementų lygiavimą, šį kartą pagal vertikalios ašies pabaigą:

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

O dabar pažiūrėkime kaip atrodo mūsų gardas per žvalgyklę:

Taip pat žiūrėkite

savybė flex-direction,
kuri nurodo flex blokų ašių kryptį
savybė justify-content,
kuri nurodo lygiavimą pagal pagrindinę ašį
savybė align-items,
kuri nurodo lygiavimą pagal skersinę ašį
savybė flex-wrap,
kuri nurodo flex blokų kelių eilučių galimybę
savybė flex-flow,
sutrumpinimas flex-direction ir flex-wrap
savybė order,
kuri nurodo flex blokų tvarką
savybė align-self,
kuri nurodo vieno bloko lygiavimą
savybė flex-basis,
kuri nurodo konkretaus flex bloko dydį
savybė flex-grow,
kuri nurodo flex blokų "godumą"
savybė flex-shrink,
kuri nurodo flex blokų susispaudimo galimybę
savybė flex,
sutrumpinimas flex-grow, flex-shrink ir flex-basis