Vlastnost place-content

Vlastnost place-content nastavuje zarovnání prvků podél hlavní a příčné osy pro flexboxové prvky, a podél vodorovné a svislé osy pro gridy. První hodnota určuje zarovnání podél hlavní (vodorovné) osy, druhá hodnota - příčné (svislé). Vlastnost se aplikuje na nadřazený prvek.

Syntaxe

selektor {
	place-content: hlavni_osa prična_osa;
}

Příklad . Zarovnání na začátek hlavní a střed příčné osy

Nyní jsou prvky přitlačeny k horní části hlavní osy a zároveň jsou ve středu příčné:

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

Příklad . Zarovnání na střed hlavní a konec příčné osy

Nyní jsou prvky umístěny ve středu hlavní osy a na konci příčné:

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

Příklad . Zarovnání na konec hlavní a začátek příčné osy

Zde jsou prvky přitlačeny k dolní části hlavní osy a zároveň na začátek příčné:

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

Příklad . Zarovnání na začátek svislé a konec vodorovné osy v gridu

Zarovnejme naše prvky na začátek svislé a konec vodorovné osy:

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

Příklad . Zarovnání na střed svislé a začátek vodorovné osy v gridu

Zarovnejme naše prvky na střed svislé a začátek vodorovné osy:

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

Příklad . Zarovnání na konec svislé a začátek vodorovné osy v gridu

Zarovnejme naše prvky na konec svislé a začátek vodorovné osy:

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

Viz také

vlastnost align-content,
která nastavuje zarovnání podél příčné nebo svislé osy
vlastnost justify-content,
která nastavuje zarovnání podél hlavní osy