align-self қасиеті

align-self қасиеті жеке алынған flex-блок үшін көлденең ось бойынша және жеке элемент үшін торда тік ось бойынша туралауды белгілейді. Негізінде бұл қасиет align-items қасиетінің нақты блок үшін нұсқасын білдіреді.

Синтаксис

селектор {
	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;
}

Мысал . Торда тік осьтің басы бойынша туралау

Бірінші элемент үшін тік осьтің басы бойынша туралауды орнатайық:

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

Мысал . Торда тік осьтің ортасы бойынша туралау

Бірінші элементті тік осьтің ортасы бойынша туралауды орнатайық:

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

Мысал . Торда тік осьтің соңы бойынша туралау

Тордағы бірінші элементті тік осьтің соңы бойынша туралауды орнатайық:

<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 үшін қысқарту