Sifa align-self

Sifa align-self inaweka uratibu kulingana na mhimili wa kuvuka kwa kizuizi kimoja cha flex na kulingana na mhimili wima kwa kipengele kimoja katika gridi. Kimsingi sifa hii inawakilisha sifa align-items, lakini kwa kizuizi maalum.

Syntax

kichaguli {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Thamani

Thamani	Maelezo
`flex-start`	Kizuizi kinasukuma mwanzo wa mhimili wa kuvuka.
`flex-end`	Kizuizi kinasukuma mwisho wa mhimili wa kuvuka.
`center`	Kizuizi kiko katikati ya mhimili wa kuvuka.
`baseline`	Kizuizi kinapangwa kulingana na mstari wake wa msingi. Mstari wa msingi - huu ni mstari wa kufikirika, unaoenda kando ya makali ya chini ya herufi bila kuzingatia vitone, kwa mfano, kama herufi `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Kizuizi kimeinyololewa, kikichukua nafasi yote inayopatikana kwenye mhimili wa kuvuka, hata hivyo bado `min-width` na `max-width` zinazingatiwa, kama zimewekwa. Ikiwa upana na urefu zimewekwa kwa kipengele - `stretch` itapuuzwa.
`auto`	Kizuizi kita pangwa kama ilivyowekwa katika sifa `align-items`.

Thamani chaguomsingi: auto.

Mfano . Thamani stretch

Katika mfano huu vizuizi vyote vimepewa thamani flex-start (sifa align-items), na kizuizi cha tatu - align-self kwa thamani stretch:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div id="elem">3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: stretch;
}

Mfano . Thamani flex-end

Katika mfano huu vizuizi vyote kwa sifa align-items vimepewa thamani flex-start, na kizuizi cha tatu - align-self kwa thamani flex-end:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div id="elem">3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: flex-end;
}

Mfano . Uratibu wa mwanzo wa mhimili wima kwenye gridi

Wacha tuweke uratibu wa kipengele cha kwanza kulingana na mwanzo wa mhimili wima:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 {
	align-self: start;
}

Mfano . Uratibu wa katikati ya mhimili wima kwenye gridi

Wacha tuweke uratibu wa kipengele cha kwanza kulingana na katikati ya mhimili wima:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 {
	align-self: center;
}

Mfano . Uratibu wa mwisho wa mhimili wima kwenye gridi

Wacha tuweke uratibu wa kipengele chetu cha kwanza kwenye gridi kulingana na mwisho wa mhimili wima:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 {
	align-self: end;
}

Angalia pia

sifa flex-direction,
inayoweka mwelekeo wa shoka za vizuizi vya flex
sifa justify-content,
inayoweka uratibu wa mhimili kuu
sifa align-items,
inayoweka uratibu wa mhimili wa kuvuka
sifa flex-wrap,
inayoweka urefu wa mistari ya vizuizi vya flex
sifa flex-flow,
ufupisho wa flex-direction na flex-wrap
sifa order,
inayoweka mpangilio wa vizuizi vya flex
sifa flex-basis,
inayoweka ukubwa wa kizuizi maalum cha flex
sifa flex-grow,
inayoweka ulevi wa vizuizi vya flex
sifa flex-shrink,
inayoweka ukandamizaji wa vizuizi vya flex
sifa flex,
ufupisho wa flex-grow, flex-shrink na flex-basis