Eigenschap place-content

De eigenschap place-content bepaalt de uitlijning van elementen langs de hoofd- en kruisas voor flex-elementen, en langs de horizontale en verticale assen voor grids. De eerste waarde specificeert de uitlijning langs de hoofd- (horizontale) as, de tweede waarde - langs de kruis- (verticale) as. De eigenschap wordt toegepast op het bovenliggende element.

Syntaxis

selector {
	place-content: hoofd_as kruis_as;
}

Voorbeeld . Uitlijning naar het begin van de hoofd- en het midden van de kruisas

Momenteel zijn de elementen tegen het bovenste deel van de hoofd-as aangedrukt en bevinden zich tegelijkertijd in het midden van de kruisas:

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

Voorbeeld . Uitlijning naar het midden van de hoofd- en het einde van de kruisas

En nu zijn de elementen gecentreerd langs de hoofd-as en aan het einde van de kruisas:

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

Voorbeeld . Uitlijning naar het einde van de hoofd- en het begin van de kruisas

Hier zijn de elementen tegen het onderste deel van de hoofd-as aangedrukt en tegelijkertijd tegen het begin van de kruisas:

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

Voorbeeld . Uitlijning naar het begin van de verticale en het einde van de horizontale as in grid

Laten we onze elementen uitlijnen naar het begin van de verticale en het einde van de horizontale as:

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

Voorbeeld . Uitlijning naar het midden van de verticale en het begin van de horizontale as in grid

Laten we onze elementen uitlijnen naar het midden van de verticale en het begin van de horizontale as:

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

Voorbeeld . Uitlijning naar het einde van de verticale en het begin van de horizontale as in grid

Laten we onze elementen uitlijnen naar het einde van de verticale en het begin van de horizontale as:

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

Zie ook

de eigenschap align-content,
die de uitlijning langs de kruis- of verticale as bepaalt
de eigenschap justify-content,
die de uitlijning langs de hoofd-as bepaalt