Īpašība align-items

Īpašība align-items nosaka izlīdzināšanu elementiem gar šķērsasi flex blokiem un pa vertikālo asi gridiem. Tiek piemērota vecākelementam.

Sintakse

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

Vērtības

Vērtība	Apraksts
`flex-start`	Bloki ir piespiesti pie šķērsas (vertikālās) ass sākuma.
`flex-end`	Bloki ir piespiesti pie šķērsas (vertikālās) ass beigām.
`center`	Bloki atrodas šķērsas (vertikālās) ass centrā.
`baseline`	Elementi tiek izlīdzināti pēc to bāzes līnijas. Bāzes līnija - tā ir iedomāta līnija, kas iet gar zemāko malu simboliem neņemot vērā izkārtojumus, piemēram, kā burtiem `'p'` un `'y'`.
`stretch`	Bloki ir izstiepti, aizņemot visu pieejamo vietu gar šķērsasi, tomēr tiek ņemti vērā `min-width` un `max-width`, ja tie ir norādīti. Ja elementiem ir norādīts platums un augstums - `stretch` tiks ignorēts.

Noklusējuma vērtība: stretch.

Piemērs . Vērtība stretch

Šobrīd galvenā ass ir vērsta no kreisās puses uz labo, un gar šķērsasi elementi ir izstiepti uz visu augstumu:

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

Piemērs . Vērtība stretch + elementu izmēri

Šobrīd elementiem ir norādīts platums un augstums, tāpēc vērtība stretch īpašībai align-items tiks ignorēta:

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

Piemērs . Vērtība flex-start bez elementu izmēriem

Šobrīd elementi tiks piespiesti pie augšas:

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

Piemērs . Vērtība flex-start + elementu izmēri

Šobrīd elementi joprojām būs piespiesti pie augšas, tomēr tiem būs norādīts platums un augstums:

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

Piemērs . Vērtība flex-end + elementu izmēri

Šobrīd elementi tiks piespiesti pie apakšas:

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

Piemērs . Vērtība center + elementu izmēri

Šobrīd elementi atradīsies centrā gar šķērsasi (šajā gadījumā vertikāli):

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

Piemērs . Vērtība center, dažāda izmēra elementi

Šobrīd elementiem ir atšķirīgs izmērs augstumā (šobrīd tos izpleš teksts, bet var norādīt arī height), platums visiem ir vienāds, jo ir norādīta īpašība 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;
}

Piemērs . Vērtība baseline, dažāda izmēra elementi

Šādi izskatās izlīdzināšana pēc bāzes līnijas:

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

Piemērs . Izlīdzināšana pēc vertikālās ass sākuma gridā

Izlīdzināsim mūsu elementus šūnu iekšpusē pēc vertikālās ass sākuma:

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

Tagad apskatīsim mūsu gridu pārlūkprogrammas atkļūdotājā:

Piemērs . Izlīdzināšana pēc vertikālās ass centra gridā

Tagad izlīdzināsim mūsu elementus šūnās pēc vertikālās ass centra:

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

Apskatīsim grid atspoguļojumu atkļūdotājā:

Piemērs . Izlīdzināšana pēc vertikālās ass beigām gridā

Atkal mainīsim elementu izlīdzināšanu, šoreiz pēc vertikālās ass beigām:

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

Tagad apskatīsim kā izskatās mūsu grids caur atkļūdotāju:

Skatīt arī

īpašība flex-direction,
kura nosaka flex bloku asu virzienu
īpašība justify-content,
kura nosaka izlīdzināšanu pa galveno asi
īpašība align-items,
kura nosaka izlīdzināšanu pa šķērsasi
īpašība flex-wrap,
kura flex bloku daudzrindu īpašība
īpašība flex-flow,
saīsinājums priekš flex-direction un flex-wrap
īpašība order,
kura nosaka flex bloku secību
īpašība align-self,
kura nosaka viena bloka izlīdzināšanu
īpašība flex-basis,
kura nosaka konkrēta flex bloka izmēru
īpašība flex-grow,
kura nosaka flex bloku alkatību
īpašība flex-shrink,
kura nosaka flex bloku saspiežamību
īpašība flex,
saīsinājums priekš flex-grow, flex-shrink un flex-basis