Хосияти align-self

Хосияти align-self ҷойгиркуниро дар тири амудӣ барои як блоки алоҳидаи flex ва дар тири амудӣ барои як унсури алоҳида дар grid муқаррар мекунад. Дар асл ин хосият худро ҳамчун хосияти align-items намоён мекунад, вале барои як блоки мушаххас.

Синтаксис

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

Қимматҳо

Қиммат	Тавсиф
`flex-start`	Блок ба оғози тири амудӣ фишурда шудааст.
`flex-end`	Блок ба поёни тири амудӣ фишурда шудааст.
`center`	Блок дар маркази тири амудӣ қарор дорад.
`baseline`	Блок тибқи хати асосии худ ҷойгир карда мешавад. Хати асосӣ - ин хати тахайюлӣ мебошад, ки дар канори поёни аломатҳо мегузарад ва овезонҳоро дар назар намегирад, масалан, ҳарфҳои `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Блок кашида шудааст, тамоми ҷойги дар тири амудиро ишғол мекунад, дар ҳоле ки ҳанӯз `min-width` ва `max-width` низ дар назар гирифта мешаванд, агар муқаррар карда шаванд. Агар барои унсур паҳноӣ ва баландӣ муқаррар карда шавад - `stretch` нодида гирифта мешавад.
`auto`	Блок ба тавре ки дар хосияти `align-items` муқаррар карда шудааст, ҷойгир карда мешавад.

Қиммати пешфарз: auto.

Намуна . Қиммати stretch

Дар ин намуна ба ҳамаи блокҳо қиммати flex-start муқаррар карда шудааст (хосияти align-items), ва барои блоки сеюм - align-self бо қиммати 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;
}

Намуна . Қиммати flex-end

Дар ин намуна барои ҳамаи блокҳо барои хосияти align-items қиммати flex-start муқаррар карда шудааст, ва барои блоки сеюм - align-self бо қиммати 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;
}

Намуна . Ҷойгиркунӣ тибқи оғози тири амудӣ дар grid

Биёед ҷойгиркуниро барои унсури якум тибқи оғози тири амудӣ муқаррар кунем:

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

Намуна . Ҷойгиркунӣ тибқи маркази тири амудӣ дар grid

Биёед ҷойгиркунии унсури якумро тибқи маркази тири амудӣ муқаррар кунем:

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

Намуна . Ҷойгиркунӣ тибқи поёни тири амудӣ дар grid

Биёед ҷойгиркуниро барои унсури якуми мо дар grid тибқи поёни тири амудӣ муқаррар кунем:

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

Инчунин бубинед

хосияти flex-direction,
ки самти тирҳои блокҳои flex-ро муқаррар мекунад
хосияти justify-content,
ки ҷойгиркуниро дар тири асосӣ муқаррар мекунад
хосияти align-items,
ки ҷойгиркуниро дар тири амудӣ муқаррар мекунад
хосияти flex-wrap,
ки серсатрии блокҳои flex-ро муқаррар мекунад
хосияти flex-flow,
ихтисор барои flex-direction ва flex-wrap
хосияти order,
ки тартиби блокҳои flex-ро муқаррар мекунад
хосияти flex-basis,
ки андозаи як блоки мушаххаси flex-ро муқаррар мекунад
хосияти flex-grow,
ки ҳарисӣ (ба ҳаҷм афзудан)-и блокҳои flex-ро муқаррар мекунад
хосияти flex-shrink,
ки фишуршавӣ (хурдшавӣ)-и блокҳои flex-ро муқаррар мекунад
хосияти flex,
ихтисор барои flex-grow, flex-shrink ва flex-basis