Eienskap justify-content

Die eienskap justify-content spesifiseer die belyn van elemente langs die hoof-as vir flex bokse en langs die horisontale as vir roosters. Word toegepas op die ouer element.

Sintaksis

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

Waardes

Waarde	Beskrywing
`flex-start`	Blokke is na die begin van die hoof (horisontale) as gedruk.
`flex-end`	Blokke is na die einde van die hoof (horisontale) as gedruk.
`center`	Blokke is in die middel van die hoof (horisontale) as gesentreer.
`space-between`	Blokke is eweredig langs die hoof (horisontale) as versprei, waar die eerste element na die begin van die as gedruk is, en die laaste een na die einde.
`space-around`	Blokke is eweredig langs die hoof (horisontale) as versprei, waar die spasie tussen die eerste blok en die begin van die as, en die laaste blok en die einde van die as, dieselfde is as tussen die ander blokke. Maar hulle is nie gelyk soos dit dalk mag lyk nie: spasies word saamgevoeg en tussen twee blokke is die afstand twee keer groter as tussen 'n blok en die begin/einde van die as.

Verstekwaarde: flex-start.

Voorbeeld . Waarde flex-start

Tans wys die as van links na regs (dit word gedoen deur flex-direction: row), en die blokke is na die linkerkant gedruk:

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

Voorbeeld . Waarde flex-end

In hierdie voorbeeld wys die as ook van links na regs, maar die blokke is na die regterkant gedruk, aangesien justify-content met die waarde flex-end ingestel is:

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

Voorbeeld . Waarde center

Tans sal die blokke in die middel wees, ongeag die rigting van die hoofas:

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

Voorbeeld . Waarde space-between

Blokke is eweredig langs die hoofas versprei, waar die eerste element na die begin van die as gedruk is, en die laaste een na die einde:

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

Voorbeeld . Waarde space-around

Blokke is eweredig langs die hoofas versprei, waar die spasie tussen die eerste blok en die begin van die as, die laaste blok en die einde van die as dieselfde is as tussen die ander blokke. Maar die spasies word saamgevoeg en tussen twee blokke is die afstand twee keer groter as tussen 'n blok en die begin/einde van die as:

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

Voorbeeld . Waarde center. As afwaarts

Kom ons verander die rigting van die hoofas deur flex-direction op die waarde column te stel:

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

Voorbeeld . Waarde space-between. As afwaarts

Tans sal die blokke eweredig vertikaal versprei word:

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

Voorbeeld . Belyn na die begin van die horisontale as (rye) in 'n rooster

Kom ons stel die belyn van ons elemente na die begin van die horisontale as:

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

Voorbeeld . Belyn na die middel van die horisontale as in 'n rooster

En nou stel ons die belyn van ons elemente na die middel van die horisontale as:

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

Voorbeeld . Belyn na die einde van die horisontale as in 'n rooster

Kom ons stel die belyn van ons elemente na die einde van die horisontale as:

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

Sien ook

die eienskap flex-direction,
wat die rigting van die asse van flex bokse spesifiseer
die eienskap align-items,
wat die belyn langs die kruisas spesifiseer
die eienskap flex-wrap,
wat die veelreëlbaarheid van flex bokse spesifiseer
die eienskap flex-flow,
'n afkorting vir flex-direction en flex-wrap
die eienskap order,
wat die volgorde van flex bokse spesifiseer
die eienskap align-self,
wat die belyn van 'n enkele blok spesifiseer
die eienskap flex-basis,
wat die grootte van 'n spesifieke flex blok spesifiseer
die eienskap flex-grow,
wat die 'gulsigheid' van flex bokse spesifiseer
die eienskap flex-shrink,
wat die inkrimping van flex bokse spesifiseer
die eienskap flex,
'n afkorting vir flex-grow, flex-shrink en flex-basis