Egenskapen justify-content

Egenskapen justify-content anger justering av element längs huvudaxeln för flex-containrar och längs den horisontella axeln för grid-containrar. Tillämpas på förälderelementet.

Syntax

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

Värden

Värde	Beskrivning
`flex-start`	Elementen är tryckta mot början av huvudaxeln (den horisontella axeln).
`flex-end`	Elementen är tryckta mot slutet av huvudaxeln (den horisontella axeln).
`center`	Elementen är centrerade längs huvudaxeln (den horisontella axeln).
`space-between`	Elementen är jämnt fördelade längs huvudaxeln (den horisontella axeln), där det första elementet är tryckt mot axelns början, och det sista - mot slutet.
`space-around`	Elementen är jämnt fördelade längs huvudaxeln (den horisontella 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 läggs ihop och mellan två element är avståndet dubbelt så stort som mellan ett element och axelns början/slut.

Standardvärde: flex-start.

Exempel . Värde flex-start

Axeln är riktad från vänster till höger (detta gör flex-direction: row), och elementen är tryckta mot vänster sida:

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

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exempel . Värde flex-end

I detta exempel är axeln också riktad från vänster till höger, men elementen är tryckta mot höger sida, eftersom justify-content är satt till värdet flex-end:

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

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exempel . Värde center

Nu kommer elementen att vara centrerade oavsett huvudaxelns riktning:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exempel . Värde space-between

Elementen är fördelade längs huvudaxeln, där det första elementet är tryckt mot axelns början, och det sista - mot slutet:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exempel . Värde space-around

Elementen är fördelade längs huvudaxeln, där mellanrummet mellan det första elementet och axelns början, det sista elementet och axelns slut är samma som mellan de övriga elementen. Men mellanrummen läggs ihop och mellan två element är avståndet dubbelt så stort som mellan ett element och axelns början/slut:

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

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exempel . Värde center. Axel nedåt

Låt oss ändra huvudaxelns riktning genom att sätta flex-direction till värdet column:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exempel . Värde space-between. Axel nedåt

Nu kommer elementen att fördelas jämnt längs vertikalen:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exempel . Justering mot början av den horisontella axeln (rader) i grid

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

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

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}

Exempel . Justering i mitten av den horisontella axeln i grid

Och nu ställer vi in justeringen för våra element i mitten av den horisontella axeln:

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

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}

Exempel . Justering mot slutet av den horisontella axeln i grid

Låt oss ställa in justeringen för våra element mot slutet av den horisontella axeln:

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

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 anger riktningen på axlarna för flex-containrar
egenskapen align-items,
som anger justering längs tväraxeln
egenskapen flex-wrap,
som anger radbrytning för flex-containrar
egenskapen flex-flow,
förkortning för flex-direction och flex-wrap
egenskapen order,
som anger ordningen för flex-element
egenskapen align-self,
som anger justering av ett enskilt element
egenskapen flex-basis,
som anger storleken på ett specifikt flex-element
egenskapen flex-grow,
som anger "glupskheten" hos flex-element
egenskapen flex-shrink,
som anger komprimerbarheten hos flex-element
egenskapen flex,
förkortning för flex-grow, flex-shrink och flex-basis