justify-content Özelliği

justify-content özelliği, flex kutuları için ana eksen boyunca ve grid'ler için yatay eksen boyunca öğelerin hizalanmasını belirler. Ebeveyn öğeye uygulanır.

Sözdizimi

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

Değerler

Değer	Açıklama
`flex-start`	Kutular ana (yatay) eksenin başına dayalıdır.
`flex-end`	Kutular ana (yatay) eksenin sonuna dayalıdır.
`center`	Kutular ana (yatay) eksenin ortasında durur.
`space-between`	Kutular ana (yatay) eksen boyunca dağıtılır, ilk öğe eksenin başına, son öğe ise eksenin sonuna dayalıdır.
`space-around`	Kutular ana (yatay) eksen boyunca dağıtılır, ilk kutu ile eksenin başı arasında, son kutu ile eksenin sonu arasında, kutular arasındaki boşluk kadar mesafe bırakılır. Ancak, göründüğü gibi eşit değildirler: boşluklar toplanır ve iki kutu arasındaki mesafe, bir kutu ile eksenin başı/sonu arasındaki mesafenin iki katıdır.

Varsayılan değer: flex-start.

Örnek . flex-start değeri

Şu anda eksen soldan sağa doğru yönlendirilmiştir (bunu flex-direction: row yapar) ve kutular sol tarafa dayalıdır:

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

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Örnek . flex-end değeri

Bu örnekte eksen yine soldan sağa doğru yönlendirilmiştir, ancak kutular sağ tarafa dayalıdır, çünkü justify-content özelliği flex-end değerine ayarlanmıştır:

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

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Örnek . center değeri

Şu anda kutular, ana eksenin yönünden bağımsız olarak ortada duracaktır:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Örnek . space-between değeri

Kutular ana eksen boyunca dağıtılır, ilk öğe eksenin başına, son öğe ise eksenin sonuna dayalıdır:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Örnek . space-around değeri

Kutular ana eksen boyunca dağıtılır, ilk kutu ile eksenin başı arasında, son kutu ile eksenin sonu arasında, kutular arasındaki kadar boşluk bırakılır. Ancak, boşluklar toplanır ve iki kutu arasındaki mesafe bir kutu ile eksenin başı/sonu arasındaki mesafenin iki katıdır:

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

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Örnek . center değeri. Eksen aşağı

flex-direction özelliğini column değerine ayarlayarak ana eksenin yönünü değiştirelim:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Örnek . space-between değeri. Eksen aşağı

Şu anda kutular dikey olarak eşit şekilde dağılacaktır:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

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

Öğelerimizin yatay eksenin başına hizalanmasını ayarlayalım:

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

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

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

Şimdi öğelerimizin yatay eksenin ortasına hizalanmasını ayarlayalım:

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

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

Örnek . Grid'de yatay eksenin sonuna hizalama

Öğelerimizin yatay eksenin sonuna hizalanmasını ayarlayalım:

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

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

Ayrıca bakınız

flex-direction özelliği,
flex kutularının eksen yönünü 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 kutunun hizalanmasını belirler
flex-basis özelliği,
belirli bir flex kutusunun boyutunu belirler
flex-grow özelliği,
flex kutularının büyüme oranını belirler
flex-shrink özelliği,
flex kutularının küçülme oranını belirler
flex özelliği,
flex-grow, flex-shrink ve flex-basis için kısaltmadır