align-content Özelliği

align-content özelliği, flex bloklar için çapraz eksen boyunca, grid'ler için ise dikey eksende öğelerin hizalanmasını belirler. Ebeveyn öğeye uygulanır.

Sözdizimi

seçici {
	align-content: flex-start | flex-end | center | space-between | space-around;
}

Değerler

Değer	Açıklama
`flex-start`	Bloklar çapraz (dikey) eksenin başlangıcına dayalıdır.
`flex-end`	Bloklar çapraz (dikey) eksenin sonuna dayalıdır.
`center`	Bloklar çapraz (dikey) eksenin ortasında yer alır.
`space-between`	Bloklar çapraz (dikey) eksen boyunca dağıtılır, ilk öğe eksenin başlangıcına, son öğe ise eksenin sonuna dayalıdır.
`space-around`	Bloklar çapraz (dikey) eksen boyunca dağıtılır, ilk blok ile eksenin başlangıcı arasında, son blok ile eksenin sonu arasında, bloklar arasındaki ile aynı boşluk bulunur. Ancak, göründüğü gibi eşit değildirler: boşluklar toplanır ve iki blok arasındaki mesafe, blok ile eksen başlangıcı/sonu arasındaki mesafenin iki katıdır.

Örnek . flex-start Değeri

Bu örnekte, hizalamanın yapıldığı eksen yukarıdan aşağıya doğru yönlendirilmiştir, yani çapraz eksendir. Elde edilen sonuçtan görüleceği üzere, tüm öğelerimiz onun üst kısmına dayalıdır:

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Örnek . flex-end Değeri

Bu örnekte bloklar çapraz eksenin alt tarafına dayalıdır, çünkü align-content özelliği flex-end değerine ayarlanmıştır:

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Örnek . center Değeri

Şu anda bloklar çapraz eksenin ortasına göre hizalanmıştır:

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

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Grid'de Dikey Eksenin Başlangıcına Hizalama

Grid'deki öğelerimiz için hizalamayı dikey eksenin başlangıcına ayarlayalım:

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

#parent {
	display: grid;
	align-content: 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;
}

Grid'de Dikey Eksenin Ortasına Hizalama

Şimdi de öğelerin hizalamasını dikey eksenin ortasına ayarlayalım:

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

#parent {
	display: grid;
	align-content: 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'de Dikey Eksenin Sonuna Hizalama

Öğelerin hizalamasını dikey eksenin sonuna ayarlayalım:

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

#parent {
	display: grid;
	align-content: 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;
}

Ayrıca Bakınız

flex blokların eksen yönünü belirleyen flex-direction özelliği
ana eksen boyunca hizalamayı belirleyen justify-content özelliği
çapraz eksen boyunca hizalamayı belirleyen align-items özelliği
flex blokların çok satırlılığını belirleyen flex-wrap özelliği
flex-direction ve flex-wrap için kısaltma olan flex-flow özelliği
flex blokların sırasını belirleyen order özelliği
tek bir bloğun hizalanmasını belirleyen align-self özelliği
ana ve çapraz eksenler boyunca hizalamayı belirleyen place-content özelliği