Egenskapen align-content

Egenskapen align-content sätter justeringen av element längs tväraxeln för flex-containrar och längs den vertikala axeln för grid. Appliceras på förälderelementet.

Syntax

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

Värden

Värde	Beskrivning
`flex-start`	Elementen är tryckta mot början av tväraxeln (vertikala axeln).
`flex-end`	Elementen är tryckta mot slutet av tväraxeln (vertikala axeln).
`center`	Elementen är placerade i mitten av tväraxeln (vertikala axeln).
`space-between`	Elementen är fördelade längs tväraxeln (vertikala axeln), där det första elementet är tryckt mot axelns början, och det sista - mot slutet.
`space-around`	Elementen är fördelade längs tväraxeln (vertikala axeln), där mellanrummet mellan det första elementet och axelns början, samt det sista elementet och axelns slut, är samma som mellan de övriga elementen. De är dock inte lika, som det kan verka: mellanrummen summeras och mellan två element är avståndet dubbelt så stort som mellan ett element och axelns början/slut.

Exempel . Värdet flex-start

I detta exempel är axeln, längs vilken justering sker, riktad från topp till botten, d.v.s. den är tväraxeln. Som synes i resultatet är alla våra element tryckta mot dess ö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;
}

Exempel . Värdet flex-end

I detta exempel är elementen tryckta mot den nedre sidan av tväraxeln, eftersom egenskapen align-content är satt till värdet 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;
}

Exempel . Värdet center

Nu är elementen centrerade längs tväraxeln:

<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 början av den vertikala axeln i grid

Låt oss ställa in justeringen för våra element i grid mot början av den vertikala axeln:

<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 mitten av den vertikala axeln i grid

Och låt oss nu ställa in justeringen av elementen i mitten av den vertikala axeln:

<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 slutet av den vertikala axeln i grid

Låt oss ställa in justeringen av elementen mot slutet av den vertikala axeln:

<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 även

egenskapen flex-direction,
som sätter riktningen på axlarna för flex-containrar
egenskapen justify-content,
som sätter justering längs huvudaxeln
egenskapen align-items,
som sätter justering längs tväraxeln
egenskapen flex-wrap,
som sätter radbrytning för flex-containrar
egenskapen flex-flow,
förkortning för flex-direction och flex-wrap
egenskapen order,
som sätter ordningen för flex-element
egenskapen align-self,
som sätter justering för ett enskilt element
egenskapen place-content,
som sätter justering längs huvud- och tväraxeln