Align-items hossasy

align-items hossasy, fleks bloklar üçin göçme oky boýunça, gridler üçin bolsa şekilli oky boýunça elementleriň deňleşdirilmegini kesgitleýär. Ene elemente degişlidir.

Sintaksis

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

Görnüşleri

Görnüşi	Düşündirişi
`flex-start`	Bloklar göçme (şekilli) okunyň başyna ýerleşdirilýär.
`flex-end`	Bloklar göçme (şekilli) okunyň ahyryna ýerleşdirilýär.
`center`	Bloklar göçme (şekilli) okunyň merkezine ýerleşdirilýär.
`baseline`	Elementler öz bazis çyzygy boýunça deňleşdirilýär. Bazis çyzygy - bu, asylly mysalda ýaly `'p'` we `'y'` harpdaýy-da bolşy ýaly, aşaklyk etmeýän simwollaryň aşaky gyrasyndan geçýän garawy çyzykdyr.
`stretch`	Bloklar göçme oky boýunça elýeterli ähli ýeri eýelejek ýaly uzaldylýar, şonda eger berlen bolsa `min-width` we `max-width` hem göz öňünde tutulýar. Eger elementler üçin ini we beýikligi kesgitlenen bolsa - `stretch` görnüşi üns berilmez.

Bellenen ähmiýeti: stretch.

Mysal . Stretch görnüşi

Häzirki wagtda esasy ok çepden saga tarap, göçme oky boýunça bolsa elementler ähli beýiklige çenli uzaldy:

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

Mysal . Stretch görnüşi + elementleriň ölçegi

Häzirki wagtda elementler üçin ini we beýikligi kesgitlendi, şonuň üçin align-items hossasy üçin stretch görnüşi üns berilmez:

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

Mysal . Flex-start görnüşi, elementleriň ölçegi ýok

Häzirki wagtda elementler ýokaryk bölege ýerleşdiriler:

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

Mysal . Flex-start görnüşi + elementleriň ölçegi

Häzirki wagtda elementler ýene-de ýokaryk bölege ýerleşdiriler, ýöne olaryň bellenen ini we beýikligi bolýar:

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

Mysal . Flex-end görnüşi + elementleriň ölçegi

Häzirki wagtda elementler aşak bölege ýerleşdiriler:

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

Mysal . Center görnüşi + elementleriň ölçegi

Häzirki wagtda elementler göçme oky boýunça merkeze (şu ýagdaýda şekilli oky boýunça) ýerleşdiriler:

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

Mysal . Center görnüşi, dürli ölçegli elementler

Häzirki wagtda elementleriň beýikligi dürlidir (häzir olar tekst bilen giňelýärler, ýöne height hem berlip bolýar), ini bolsa ählisinde deň, sebäbi width hossasy berlipdir:

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

Mysal . Baseline görnüşi, dürli ölçegli elementler

Bazis çyzygy boýunça deňleşdirme bolsa şeýle görünýär:

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

Mysal . Gridde şekilli okunyň başy boýunça deňleşdirme

Öz elementlerimizi öýjükleriň içinde şekilli okunyň başy boýunça deňleşdireliň:

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

Indi bolsa göz öňünde tutuş programmanyň çemesi açyjynda gridimizi göreliň:

Mysal . Gridde şekilli okunyň merkezi boýunça deňleşdirme

Indi bolsa öýjükleriň içindäki elementlerimizi şekilli okunyň merkezi boýunça deňleşdireliň:

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

Göz öňünde tutuş programmanyň çemesi açyjynda gridiň görkezilişine seredeliň:

Mysal . Gridde şekilli okunyň ahyry boýunça deňleşdirme

Bu gezek elementleriň deňleşdirilmesini üýtgedeliň, bu sany şekilli okunyň ahyry boýunça:

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

Indi bolsa çemesi açyjyň üsti bilen gridimiziň nähili görnüşine seredeliň:

Hem görüň

flex-direction hossasy,
ol fleks bloklaryň oklarynyň ugruny kesgitleýär
justify-content hossasy,
ol esasy oky boýunça deňleşdirilmäni kesgitleýär
align-items hossasy,
ol göçme oky boýunça deňleşdirilmäni kesgitleýär
flex-wrap hossasy,
ol fleks bloklaryň köp setirli bolmagyny kesgitleýär
flex-flow hossasy,
flex-direction we flex-wrap üçin gysgaldylan görnüşi
order hossasy,
ol fleks bloklaryň tertibini kesgitleýär
align-self hossasy,
ol bir blokyň deňleşdirilmegini kesgitleýär
flex-basis hossasy,
ol kesgitlenen fleks blokyň ölçegini kesgitleýär
flex-grow hossasy,
ol fleks bloklaryň tamahkarlygyny kesgitleýär
flex-shrink hossasy,
ol fleks bloklaryň ýumşaklygyny kesgitleýär
flex hossasy,
flex-grow, flex-shrink we flex-basis üçin gysgaldylan görnüşi