Eigenschap align-content

De eigenschap align-content bepaalt de uitlijning van elementen langs de dwarsas voor flex containers en langs de verticale as voor grids. Wordt toegepast op het bovenliggende element.

Syntaxis

selector {
	align-content: flex-start | flex-end | center | space-between | space-around;
}

Waarden

Waarde	Beschrijving
`flex-start`	De blokken zijn tegen het begin van de dwarsas (verticale as) aangedrukt.
`flex-end`	De blokken zijn tegen het einde van de dwarsas (verticale as) aangedrukt.
`center`	De blokken staan in het midden van de dwarsas (verticale as).
`space-between`	De blokken zijn verdeeld langs de dwarsas (verticale as), waarbij het eerste element tegen het begin van de as is aangedrukt, en het laatste - tegen het einde.
`space-around`	De blokken zijn verdeeld langs de dwarsas (verticale as), waarbij tussen het eerste blok en het begin van de as, het laatste blok en het einde van de as dezelfde ruimte is, als tussen de overige blokken. Echter, ze zijn niet gelijk, zoals het misschien lijkt: de tussenruimtes worden opgeteld en tussen twee blokken is de afstand twee keer zo groot als tussen een blok en het begin/einde van de as.

Voorbeeld . Waarde flex-start

In dit voorbeeld is de as, waarlangs de uitlijning plaatsvindt, van boven naar beneden gericht, d.w.z. het is de dwarsas. Zoals te zien is in het verkregen resultaat, zijn al onze elementen tegen het bovenste deel aangedrukt:

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

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

Voorbeeld . Waarde flex-end

In dit voorbeeld zijn de blokken tegen de onderkant van de dwarsas aangedrukt, omdat de eigenschap align-content is ingesteld op de waarde flex-end:

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

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

Voorbeeld . Waarde center

Nu zijn de blokken in het midden van de dwarsas uitgelijnd:

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

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

Uitlijning op het begin van de verticale as in grid

Laten we de uitlijning voor onze elementen in het grid instellen op het begin van de verticale as:

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

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

Uitlijning in het midden van de verticale as in grid

Laten we nu de uitlijning van de elementen instellen in het midden van de verticale as:

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

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

Uitlijning op het einde van de verticale as in grid

Laten we de uitlijning van de elementen instellen op het einde van de verticale as:

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

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

Zie ook

eigenschap flex-direction,
die de richting van de assen van flex containers bepaalt
eigenschap justify-content,
die de uitlijning langs de hoofdas bepaalt
eigenschap align-items,
die de uitlijning langs de dwarsas bepaalt
eigenschap flex-wrap,
die de meerdere regels voor flex containers bepaalt
eigenschap flex-flow,
afkorting voor flex-direction en flex-wrap
eigenschap order,
die de volgorde van flex items bepaalt
eigenschap align-self,
die de uitlijning van één item bepaalt
eigenschap place-content,
die de uitlijning langs de hoofdas en dwarsas bepaalt