Egenskapen align-content

Egenskapen align-content setter justering av elementer langs tverraksen for flex-beholdere og langs den vertikale aksen for grids. Brukes på foreldreelementet.

Syntaks

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

Verdier

Verdi	Beskrivelse
`flex-start`	Blokker er presset mot starten av tverraksen (vertikal akse).
`flex-end`	Blokker er presset mot slutten av tverraksen (vertikal akse).
`center`	Blokker er plassert i senter av tverraksen (vertikal akse).
`space-between`	Blokker er fordelt langs tverraksen (vertikal akse), hvor det første elementet er presset mot starten av aksen, og det siste - mot slutten.
`space-around`	Blokker er fordelt langs tverraksen (vertikal akse), hvor mellomrommet mellom den første blokken og starten av aksen, og den siste blokken og slutten av aksen er det samme som mellom de andre blokkene. Imidlertid er de ikke like, som det kan virke som: mellomrommene summeres og mellom to blokker er avstanden dobbelt så stor som mellom en blokk og starten/slutten av aksen.

Eksempel . Verdien flex-start

I dette eksemplet er aksen som justeringen skjer langs retning ovenfra og ned, dvs. den er tverrgående. Som det kan sees av resultatet, er alle våre elementer presset mot dens øvre 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 . Verdien flex-end

I dette eksemplet er blokkene presset mot nedsiden av tverraksen, siden egenskapen align-content er satt til verdien 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 . Verdien center

Nå er blokkene justert i senter av tverraksen:

<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 mot starten av vertikal akse i grid

La oss sette justering for våre elementer i grid mot starten av den vertikale aksen:

<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 senter av vertikal akse i grid

Og la oss nå sette justering av elementer i senter av den vertikale aksen:

<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 mot slutten av vertikal akse i grid

La oss sette justering av elementer mot slutten av den vertikale aksen:

<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å

egenskapen flex-direction,
som setter retningen på aksene for flex-beholdere
egenskapen justify-content,
som setter justering langs hovedaksen
egenskapen align-items,
som setter justering langs tverraksen
egenskapen flex-wrap,
som setter flerlinjethet for flex-beholdere
egenskapen flex-flow,
forkortelse for flex-direction og flex-wrap
egenskapen order,
som setter rekkefølgen på flex-blokker
egenskapen align-self,
som setter justering av en enkelt blokk
egenskapen place-content,
som setter justering langs hoved- og tverrakser