align-self Özelliği

align-self özelliği, ayrı bir flex bloğu için çapraz eksen boyunca ve bir grid içindeki ayrı bir öğe için dikey eksen boyunca hizalamayı belirler. Aslında bu özellik, align-items özelliğinin belirli bir blok için olan halidir.

Sözdizimi

seçici {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Değerler

Değer	Açıklama
`flex-start`	Blok, çapraz eksenin başına dayalıdır.
`flex-end`	Blok, çapraz eksenin sonuna dayalıdır.
`center`	Blok, çapraz eksenin ortasında durur.
`baseline`	Blok kendi taban çizgisine göre hizalanır. Taban çizgisi, `'p'`, `'q'`, `'y'`, `'g'` gibi harflerdeki sarkmalar dikkate alınmadan karakterlerin alt kenarından geçen hayali bir çizgidir.
`stretch`	Blok, çapraz eksen boyunca tüm kullanılabilir alanı kaplayacak şekilde uzatılır, ancak yine de `min-width` ve `max-width` belirtilmişse dikkate alınır. Öğe için genişlik ve yükseklik belirtilmişse - `stretch` göz ardı edilir.
`auto`	Blok, `align-items` özelliğinde belirtildiği gibi hizalanır.

Varsayılan değer: auto.

Örnek . Stretch değeri

Bu örnekte tüm bloklara flex-start değeri atanmıştır (align-items özelliği), üçüncü bloğa ise align-self özelliği stretch değerinde verilmiştir:

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

Örnek . Flex-end değeri

Bu örnekte tüm bloklar için align-items özelliği flex-start değerine ayarlanmış, üçüncü bloğa ise align-self özelliği flex-end değerinde verilmiştir:

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

Örnek . Grid'de dikey eksenin başına hizalama

İlk öğe için dikey eksenin başına hizalama ayarlayalım:

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

Örnek . Grid'de dikey eksenin ortasına hizalama

İlk öğe için dikey eksenin ortasına hizalama ayarlayalım:

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

Örnek . Grid'de dikey eksenin sonuna hizalama

Grid'deki ilk öğemiz için dikey eksenin sonuna hizalama ayarlayalım:

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

Ayrıca bakınız

flex-direction özelliği,
flex bloklarının eksen yönünü belirler
justify-content özelliği,
ana eksen boyunca hizalamayı belirler
align-items özelliği,
çapraz eksen boyunca hizalamayı belirler
flex-wrap özelliği,
flex bloklarının çok satırlılığını belirler
flex-flow özelliği,
flex-direction ve flex-wrap için kısaltmadır
order özelliği,
flex bloklarının sırasını belirler
flex-basis özelliği,
belirli bir flex bloğunun boyutunu belirler
flex-grow özelliği,
flex bloklarının büyüme oranını belirler
flex-shrink özelliği,
flex bloklarının küçülme oranını belirler
flex özelliği,
flex-grow, flex-shrink ve flex-basis için kısaltmadır