Egenskapen justify-content

Egenskapen justify-content angir justering av elementer langs hovedaksen for flex-containere og langs den horisontale aksen for grid-containere. Den brukes på foreldreelementet.

Syntaks

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

Verdier

Verdi	Beskrivelse
`flex-start`	Elementene er presset mot starten av hovedaksen (horisontal akse).
`flex-end`	Elementene er presset mot slutten av hovedaksen (horisontal akse).
`center`	Elementene er plassert i senter av hovedaksen (horisontal akse).
`space-between`	Elementene er fordelt jevnt langs hovedaksen (horisontal akse), hvor det første elementet er presset mot starten av aksen, og det siste elementet er presset mot slutten.
`space-around`	Elementene er fordelt jevnt langs hovedaksen (horisontal akse), hvor mellomrommet mellom det første elementet og starten av aksen, og mellom det siste elementet og slutten av aksen, er det samme som mellomrommet mellom de andre elementene. Imidlertid er de ikke like, som man kanskje tror: mellomrommene summeres, og mellom to elementer er avstanden dobbelt så stor som mellom et element og starten/slutten av aksen.

Standardverdi: flex-start.

Eksempel . Verdien flex-start

Aksen er rettet fra venstre til høyre (dette gjør flex-direction: row), og elementene er presset mot 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 . Verdien flex-end

I dette eksemplet er aksen også rettet fra venstre til høyre, men elementene er presset mot høyre side, siden justify-content er satt til verdien 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 . Verdien center

Nå vil elementene stå i senter uavhengig av 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 . Verdien space-between

Elementene er fordelt jevnt langs hovedaksen, hvor det første elementet er presset mot starten av aksen, og det siste elementet er presset mot slutten:

<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 . Verdien space-around

Elementene er fordelt jevnt langs hovedaksen, hvor mellomrommet mellom det første elementet og starten av aksen, og mellom det siste elementet og slutten av aksen, er det samme som mellomrommet mellom de andre elementene. Imidlertid summeres mellomrommene og mellom to elementer er avstanden dobbelt så stor som mellom et element og starten/slutten av 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 . Verdien center. Aksen nedover

La oss endre retningen på hovedaksen ved å sette flex-direction til verdien 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 . Verdien space-between. Aksen nedover

Nå vil elementene fordeles jevnt vertikalt:

<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 mot starten av horisontal akse (rader) i grid

La oss sette justeringen for våre elementer mot starten av den horisontale aksen:

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

La oss nå sette justeringen for våre elementer i senter av den horisontale aksen:

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

La oss sette justeringen for våre elementer mot slutten av den horisontale aksen:

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

egenskapen flex-direction,
som angir retningen på aksene i flex-containere
egenskapen align-items,
som angir justering langs kryssaksen
egenskapen flex-wrap,
som angir flerlinjefleksibilitet for flex-containere
egenskapen flex-flow,
forkortelse for flex-direction og flex-wrap
egenskapen order,
som angir rekkefølgen til flex-elementer
egenskapen align-self,
som angir justering av et enkelt element
egenskapen flex-basis,
som angir størrelsen på et spesifikt flex-element
egenskapen flex-grow,
som angir "grådigheten" til flex-elementer
egenskapen flex-shrink,
som angir krympbarheten til flex-elementer
egenskapen flex,
forkortelse for flex-grow, flex-shrink og flex-basis