Egenskaben justify-content

Egenskaben justify-content angiver justeringen af elementer langs hovedaksen for flex-containere og langs den horisontale akse for grid-containere. Anvendes på forælderelementet.

Syntaks

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

Værdier

Værdi	Beskrivelse
`flex-start`	Elementer er placeret mod starten af hovedaksen (den horisontale akse).
`flex-end`	Elementer er placeret mod slutningen af hovedaksen (den horisontale akse).
`center`	Elementer er centreret langs hovedaksen (den horisontale akse).
`space-between`	Elementer er jævnt fordelt langs hovedaksen (den horisontale akse), hvor det første element er placeret mod starten af aksen, og det sidste element er placeret mod slutningen.
`space-around`	Elementer er jævnt fordelt langs hovedaksen (den horisontale akse), hvor der er lige stor afstand mellem det første element og starten af aksen, det sidste element og slutningen af aksen, og mellem de øvrige elementer. De er dog ikke lige store, som det måske ser ud til: afstandene lægges sammen, så mellem to elementer er afstanden dobbelt så stor som mellem et element og starten/slutningen af aksen.

Standardværdi: flex-start.

Eksempel . Værdien flex-start

Aksens retning er fra venstre mod højre (dette gøres af flex-direction: row), og elementerne er placeret mod venstre side:

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

Eksempel . Værdien flex-end

I dette eksempel er aksens retning også fra venstre mod højre, men elementerne er placeret mod højre side, fordi der er angivet justify-content med værdien 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;
}

Eksempel . Værdien center

Nu vil elementerne være centreret uafhængigt af hovedaksens retning:

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

Eksempel . Værdien space-between

Elementerne er jævnt fordelt langs hovedaksen, hvor det første element er placeret mod starten af aksen, og det sidste element er placeret mod slutningen:

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

Eksempel . Værdien space-around

Elementerne er jævnt fordelt langs hovedaksen, hvor der er lige stor afstand mellem det første element og starten af aksen, det sidste element og slutningen af aksen, og mellem de øvrige elementer. Afstandene lægges dog sammen, så mellem to elementer er afstanden dobbelt så stor som mellem et element og starten/slutningen af aksen:

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

Eksempel . Værdien center. Aksens retning nedad

Lad os ændre hovedaksens retning ved at sætte flex-direction til værdien 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;
}

Eksempel . Værdien space-between. Aksens retning nedad

Nu vil elementerne blive fordelt jævnt på den lodrette akse:

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

Eksempel . Justering mod starten af den horisontale akse (rækker) i grid

Lad os angive justering for vores elementer mod starten af den horisontale akse:

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

Eksempel . Justering i midten af den horisontale akse i grid

Lad os nu angive justering for vores elementer i midten af den horisontale akse:

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

Eksempel . Justering mod slutningen af den horisontale akse i grid

Lad os angive justering for vores elementer mod slutningen af den horisontale akse:

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

egenskaben flex-direction,
som angiver retningen af akserne for flex-containere
egenskaben align-items,
som angiver justeringen langs den tværgående akse
egenskaben flex-wrap,
som angiver om fleksible elementer skal brydes over flere linjer
egenskaben flex-flow,
en sammentrækning for flex-direction og flex-wrap
egenskaben order,
som angiver rækkefølgen af fleksible elementer
egenskaben align-self,
som angiver justeringen af et enkelt element
egenskaben flex-basis,
som angiver startstørrelsen på et specifikt fleksibelt element
egenskaben flex-grow,
som angiver hvor meget et fleksibelt element må vokse
egenskaben flex-shrink,
som angiver hvor meget et fleksibelt element må skrumpe
egenskaben flex,
en sammentrækning for flex-grow, flex-shrink og flex-basis