justify-items Özelliği

justify-items özelliği, ızgara hücreleri içindeki öğelerin yatay eksende hizalanmasını belirler. Hizalamanın en belirgin şekli tarayıcı hata ayıklayıcısında ızgarayı görüntülerken fark edilir. Ebeveyn öğeye uygulanır.

Sözdizimi

seçici {
	justify-items: flex-start | flex-end | center ;
}

Değerler

Değer	Açıklama
`flex-start`	Öğeler yatay eksenin başına dayalıdır.
`flex-end`	Bloklar yatay eksenin sonuna dayalıdır.
`center`	Bloklar yatay eksenin ortasında yer alır.

Örnek . Yatay eksenin başına hizalama

Öğelerimizi hücreler içinde yatay eksenin başı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;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Şimdi ızgaramızı hata ayıklayıcıda görüntüleyelim:

Örnek . Yatay eksenin ortasına hizalama

Öğelerimizi hücrelerde yatay 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;
	justify-items: 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;
}

Tarayıcı hata ayıklayıcısını açtığımızda ızgaramızı göreceğiz:

Örnek . Yatay eksenin sonuna hizalama

Öğelerimizi yatay eksenin sonuna hizalayalım:

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

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

Şimdi ızgarayı hata ayıklayıcı üzerinden görelim:

Ayrıca Bakınız

align-items özelliği,
çapraz eksende hizalamayı belirler
place-items özelliği,
ızgara hücreleri içindeki öğelerin hizalanmasını belirler