place-content özelliği

place-content özelliği, flex öğeleri için ana ve çapraz eksenlerde, grid'ler için ise yatay ve dikey eksenlerde öğelerin hizalanmasını belirler. İlk değer ana (yatay) eksendeki hizalamayı, ikinci değer ise çapraz (dikey) eksendeki hizalamayı belirtir. Bu özellik ebeveyn öğeye uygulanır.

Sözdizimi

seçici {
	place-content: ana_eksen çapraz_eksen;
}

Örnek . Ana eksenin başında ve çapraz eksenin merkezinde hizalama

Şu anda öğeler ana eksenin üst kısmına dayalı ve aynı zamanda çapraz eksenin merkezinde konumlanmış durumda:

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

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

Örnek . Ana eksenin merkezinde ve çapraz eksenin sonunda hizalama

Şimdi ise öğeler ana eksenin merkezinde ve çapraz eksenin sonunda konumlanmış durumda:

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

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

Örnek . Ana eksenin sonunda ve çapraz eksenin başında hizalama

Burada öğeler ana eksenin alt kısmına ve aynı zamanda çapraz eksenin başlangıcına dayalı:

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

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

Örnek . Grid'de dikey eksenin başında ve yatay eksenin sonunda hizalama

Öğelerimizi dikey eksenin başlangıcında ve yatay eksenin sonunda hizalayalım:

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

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

Örnek . Grid'de dikey eksenin merkezinde ve yatay eksenin başında hizalama

Öğelerimizi dikey eksenin merkezinde ve yatay eksenin başlangıcında hizalayalım:

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

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

Örnek . Grid'de dikey eksenin sonunda ve yatay eksenin başında hizalama

Öğelerimizi dikey eksenin sonunda ve yatay eksenin başlangıcında hizalayalım:

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

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

Ayrıca bakınız

align-content özelliği,
çapraz veya dikey eksendeki hizalamayı belirler
justify-content özelliği,
ana eksendeki hizalamayı belirler