align-items Özelliği

align-items özelliği, flex kutuları için çapraz eksen boyunca ve grid'ler için dikey eksen boyunca öğelerin hizalanmasını belirler. Ebeveyn öğeye uygulanır.

Sözdizimi

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

Değerler

Değer	Açıklama
`flex-start`	Kutular çapraz (dikey) eksenin başlangıcına dayalıdır.
`flex-end`	Kutular çapraz (dikey) eksenin sonuna dayalıdır.
`center`	Kutular çapraz (dikey) eksenin ortasında durur.
`baseline`	Öğeler kendi taban çizgilerine göre hizalanır. Taban çizgisi, `'p'` ve `'y'` gibi harflerde olduğu gibi, sarkmalar dikkate alınmadan karakterlerin alt kenarından geçen hayali bir çizgidir.
`stretch`	Kutular çapraz eksen boyunca tüm mevcut alanı kaplayacak şekilde uzatılır, ancak yine de `min-width` ve `max-width` belirtilmişse dikkate alınır. Öğeler için genişlik ve yükseklik belirtilmişse - `stretch` göz ardı edilir.

Varsayılan değer: stretch.

Örnek . Stretch değeri

Şu anda ana eksen soldan sağa doğru, ve çapraz eksen boyunca öğeler tüm yüksekliğe kadar uzatılmıştır:

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

Örnek . Stretch değeri + öğe boyutları

Şu anda öğeler için genişlik ve yükseklik belirtildi, bu nedenle align-items özelliği için stretch değeri göz ardı edilecektir:

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

Örnek . Flex-start değeri öğe boyutları olmadan

Şu anda öğeler üst kısma dayalı olacaktır:

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

Örnek . Flex-start değeri + öğe boyutları

Şu anda öğeler yine üst kısma dayalı olacaktır, ancak onlar için belirli bir genişlik ve yükseklik olacaktır:

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

Örnek . Flex-end değeri + öğe boyutları

Şu anda öğeler alt kısma dayalı olacaktır:

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

Örnek . Center değeri + öğe boyutları

Şu anda öğeler çapraz eksen (bu durumda dikey) ortasında duracaktır:

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

Örnek . Center değeri, farklı boyutlarda öğeler

Şu anda öğeler yükseklik açısından farklı boyuta sahiptir (şu anda metin tarafından genişletiliyorlar, ancak height de belirtilebilir), genişlik herkeste aynıdır, çünkü width özelliği belirtilmiştir:

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

Örnek . Baseline değeri, farklı boyutlarda öğeler

İşte taban çizgisine hizalama şöyle görünür:

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

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

Hücreler içindeki öğelerimizi dikey eksenin başlangıcına göre hizalayalım:

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

Ve şimdi grid'imize tarayıcı hata ayıklayıcısında bakalım:

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

Şimdi hücrelerdeki öğelerimizi dikey eksenin ortasına hizalayalım:

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

Grid'in hata ayıklayıcıda görüntülenmesine bakalım:

Örnek . Grid'de dikey eksenin sonuna hizalama

Öğelerin hizalamasını bu sefer dikey eksenin sonuna göre tekrar değiştirelim:

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

Şimdi grid'imizin hata ayıklayıcı üzerinden nasıl göründüğüne bakalım:

Ayrıca bakınız

flex-direction özelliği,
flex kutuları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 kutuları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 kutularının sırasını belirler
align-self özelliği,
tek bir bloğun hizalanmasını belirler
flex-basis özelliği,
belirli bir flex bloğunun boyutunu belirler
flex-grow özelliği,
flex kutularının genişleme faktörünü belirler
flex-shrink özelliği,
flex kutularının küçülme faktörünü belirler
flex özelliği,
flex-grow, flex-shrink ve flex-basis için kısaltmadır