Egenskaben align-content

Egenskaben align-content angiver justering af elementer langs den tværgående akse for flex-containere og langs den lodrette akse for grids. Anvendes på forælderelementet.

Syntaks

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

Værdier

Værdi	Beskrivelse
`flex-start`	Blokkene er trykket mod starten af den tværgående (lodrette) akse.
`flex-end`	Blokkene er trykket mod enden af den tværgående (lodrette) akse.
`center`	Blokkene er placeret i midten af den tværgående (lodrette) akse.
`space-between`	Blokkene er fordelt langs den tværgående (lodrette) akse, hvor det første element er trykket mod starten af aksen, og det sidste - mod enden.
`space-around`	Blokkene er fordelt langs den tværgående (lodrette) akse, hvor der mellem den første blok og starten af aksen, og mellem den sidste blok og enden af aksen er det samme mellemrum som mellem de resterende blokke. De er dog ikke lige store, som det måske kunne se ud til: mellemrummene lægges sammen, og mellem to blokke er afstanden dobbelt så stor som mellem en blok og starten/enden af aksen.

Eksempel . Værdien flex-start

I dette eksempel er aksen, som justeringen foregår langs, rettet ovenfra og ned, dvs. den er tværgående. Som det ses af det opnåede resultat, er alle vores elementer trykket mod dens øverste del:

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

Eksempel . Værdien flex-end

I dette eksempel er blokkene trykket mod den nederste side af den tværgående akse, da egenskaben align-content er angivet med værdien 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;
}

Eksempel . Værdien center

Nu er blokkene justeret i midten af den tværgående akse:

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

Justering mod starten af den lodrette akse i grid

Lad os indstille justeringen for vores elementer i griddet mod starten af den lodrette akse:

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

Justering i midten af den lodrette akse i grid

Og lad os nu indstille justeringen af elementerne i midten af den lodrette akse:

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

Justering mod enden af den lodrette akse i grid

Lad os indstille justeringen af elementerne mod enden af den lodrette akse:

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

Se også

egenskaben flex-direction,
som angiver retningen af akserne for flex-containere
egenskaben justify-content,
som angiver justering langs hovedaksen
egenskaben align-items,
som angiver justering langs den tværgående akse
egenskaben flex-wrap,
som angiver om fleksible elementer skal ombrydes eller ikke
egenskaben flex-flow,
genvej for flex-direction og flex-wrap
egenskaben order,
som angiver rækkefølgen af flex-elementer
egenskaben align-self,
som angiver justering af en enkelt blok
egenskaben place-content,
som angiver justering langs hoved- og tværakser