Sifa align-items

Sifa align-items inabainisha mpangilio wa vipengele kwenye mhimili wa kuvuka kwa vizuizi vya flex na kwenye mhimili wima kwa gridi. Inatumika kwa kipengele cha mzazi.

Syntax

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

Thamani

Thamani	Maelezo
`flex-start`	Vizuizi vimesukumwa kwenye mwanzo wa mhimili wa kuvuka (wima).
`flex-end`	Vizuizi vimesukumwa kwenye mwisho wa mhimili wa kuvuka (wima).
`center`	Vizuizi vimo katikati ya mhimili wa kuvuka (wima).
`baseline`	Vipengele vinalinganishwa kulingana na mstari wao wa msingi. Mstari wa msingi ni mstari wa kufikiria, unaopita kando ya chini ya herufi bila kuzingatia vitone, kwa mfano, kama herufi `'p'` na `'y'`.
`stretch`	Vizuizi vimetambaswa, vikichukua nafasi yote inayopatikana kwenye mhimili wa kuvuka, hata hivyo bado `min-width` na `max-width` zinazingatiwa, ikiwa zimewekwa. Lakini ikiwa upana na urefu vimewekwa kwa vipengele - `stretch` itapuuzwa.

Thamani chaguomsingi: stretch.

Mfano . Thamani stretch

Hivi sasa mhimili kuu unaelekezwa kutoka kushoto kwenda kulia, na kwenye mhimili wa kuvuka vipengele vimetambaswa kwa urefu wote:

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

Mfano . Thamani stretch + vipimo vya kipengele

Hivi sasa kwa vipengele umewekwa upana na urefu, kwa hivyo thamani stretch kwa sifa align-items itapuuzwa:

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

Mfano . Thamani flex-start bila vipimo vya kipengele

Hivi sasa vipengele vitasukumwa juu:

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

Mfano . Thamani flex-start + vipimo vya kipengele

Hivi sasa vipengele bado vitasukumwa juu, hata hivyo vitakuwa na upana uliowekwa na urefu:

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

Mfano . Thamani flex-end + vipimo vya kipengele

Hivi sasa vipengele vitasukumwa chini:

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

Mfano . Thamani center + vipimo vya kipengele

Hivi sasa vipengele vitasimama katikati kwenye mhimili wa kuvuka (kwa kesi hii kwa wima):

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

Mfano . Thamani center, vipengele vya ukubwa tofauti

Hivi sasa vipengele vina ukubwa tofauti kwa urefu (hivi sasa vinapanuliwa na maandishi, lakini inaweza kuwekwa height), upana kwa kila mmoja ni sawa, kwa kuwa sifa width imewekwa:

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

Mfano . Thamani baseline, vipengele vya ukubwa tofauti

Na hivi ndivyo inavyoonekana mpangilio kulingana na mstari wa msingi:

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

Mfano . Kupangilia kwenye mwanzo wa mhimili wima kwenye gridi

Wacha tupangilie vipengele vyetu ndani ya seli kwenye mwanzo wa mhimili wima:

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

Na sasa tuangalie gridi yetu kwenye kipimo cha kivinjari:

Mfano . Kupangilia katikati ya mhimili wima kwenye gridi

Na sasa tuwapangilie vipengele vyetu kwenye seli katikati ya mhimili wima:

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

Wacha tuangalie onyesho la gridi kwenye kipimo:

Mfano . Kupangilia kwenye mwisho wa mhimili wima kwenye gridi

Tubadilishe tena mpangilio wa vipengele, wakati huu kwenye mwisho wa mhimili wima:

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

Na sasa tuangalie jinsi inavyoonekana gridi yetu kupitia kipimo:

Angalia pia

sifa flex-direction,
ambayo inabainisha mwelekeo wa mihimili ya vizuizi vya flex
sifa justify-content,
ambayo inabainisha mpangilio kwenye mhimili kuu
sifa align-items,
ambayo inabainisha mpangilio kwenye mhimili wa kuvuka
sifa flex-wrap,
ambayo inabainisha mistari mingi ya vizuizi vya flex
sifa flex-flow,
ufupisho wa flex-direction na flex-wrap
sifa order,
ambayo inabainisha mpangilio wa vizuizi vya flex
sifa align-self,
ambayo inabainisha mpangilio wa kizuizi kimoja
sifa flex-basis,
ambayo inabainisha ukubwa wa kizuizi maalum cha flex
sifa flex-grow,
ambayo inabainisha uwezo wa kukua kwa vizuizi vya flex
sifa flex-shrink,
ambayo inabainisha uwezo wa kukunjika kwa vizuizi vya flex
sifa flex,
ufupisho wa flex-grow, flex-shrink na flex-basis