Eienskap align-content

Die eienskap align-content stel die belyning van elemente langs die dwarsas vir flex-blikke en langs die vertikale as vir roosters. Word op die ouerelement toegepas.

Sintaksis

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

Waardes

Waarde	Beskrywing
`flex-start`	Blikke is teen die begin van die dwars- (vertikale) as gedruk.
`flex-end`	Blikke is teen die einde van die dwars- (vertikale) as gedruk.
`center`	Blikke staan in die middel van die dwars- (vertikale) as.
`space-between`	Blikke is langs die dwars- (vertikale) as versprei, terwyl die eerste element teen die begin van die as gedruk is, en die laaste een - teen die einde.
`space-around`	Blikke is langs die dwars- (vertikale) as versprei, terwyl tussen die eerste blik en die begin van die as, en tussen die laaste blik en die einde van die as, daar dieselfde spasie is as tussen die ander blikke. Dit is eger nie gelyk nie, soos dit mag lyk: die spasies word bymekaargetel en tussen twee blikke is die afstand twee keer groter as tussen 'n blik en die begin/einde van die as.

Voorbeeld . Waarde flex-start

In hierdie voorbeeld is die as waarlangs die belyning plaasvind van bo na onder gerig, dit wil sê dit is die dwarsas. Soos gesien kan word uit die resultaat, al ons elemente is teen die boonste gedeelte daarvan gedruk:

<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 hierdie voorbeeld is die blikke teen die onderkant van die dwarsas gedruk, aangesien die eienskap align-content op die waarde flex-end gestel is:

<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

Nou is die blikke in die middel van die dwarsas gebelyn:

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

Belyning teen die begin van die vertikale as in 'n rooster

Kom ons stel die belyning vir ons elemente in die rooster teen die begin van die vertikale as in:

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

Belyning in die middel van die vertikale as in 'n rooster

En nou, kom ons stel die belyning van elemente in die middel van die vertikale as in:

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

Belyning teen die einde van die vertikale as in 'n rooster

Kom ons stel die belyning van elemente teen die einde van die vertikale as in:

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

Sien ook

die eienskap flex-direction,
wat die rigting van die asse van flex-blikke stel
die eienskap justify-content,
wat belyning langs die hoofas stel
die eienskap align-items,
wat belyning langs die dwarsas stel
die eienskap flex-wrap,
wat veelvoudige reëls vir flex-blikke stel
die eienskap flex-flow,
verkorting vir flex-direction en flex-wrap
die eienskap order,
wat die volgorde van flex-blikke stel
die eienskap align-self,
wat die belyning van een blik stel
die eienskap place-content,
wat belyning langs die hoof- en dwarsasse stel