Eigenschap justify-content

De eigenschap justify-content bepaalt de uitlijning van elementen langs de hoofdas voor flex containers en langs de horizontale as voor grids. Wordt toegepast op het bovenliggende element.

Syntaxis

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

Waarden

Waarde	Beschrijving
`flex-start`	Blokken zijn tegen het begin van de hoofdas (horizontale as) aangedrukt.
`flex-end`	Blokken zijn tegen het einde van de hoofdas (horizontale as) aangedrukt.
`center`	Blokken staan in het midden van de hoofdas (horizontale as).
`space-between`	Blokken zijn verdeeld langs de hoofdas (horizontale as), waarbij het eerste element tegen het begin van de as is aangedrukt, en het laatste - tegen het einde.
`space-around`	Blokken zijn verdeeld langs de hoofdas (horizontale as), waarbij tussen het eerste blok en het begin van de as, en tussen het laatste blok en het einde van de as dezelfde ruimte is, als tussen de overige blokken. Ze zijn echter niet gelijk, zoals het misschien lijkt: de ruimtes worden opgeteld en tussen twee blokken is de afstand twee keer zo groot als tussen een blok en het begin/einde van de as.

Standaardwaarde: flex-start.

Voorbeeld . Waarde flex-start

Momenteel is de as van links naar rechts gericht (dit wordt gedaan door flex-direction: row), en de blokken zijn tegen de linkerkant aangedrukt:

<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 dit voorbeeld is de as ook van links naar rechts gericht, maar de blokken zijn tegen de rechterkant aangedrukt, omdat justify-content is ingesteld op de waarde 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;
}

Voorbeeld . Waarde center

Nu staan de blokken in het midden, onafhankelijk van de richting van de hoofdas:

<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

Blokken zijn verdeeld langs de hoofdas, waarbij het eerste element tegen het begin van de as is aangedrukt, en het laatste - tegen het 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

Blokken zijn verdeeld langs de hoofdas, waarbij tussen het eerste blok en het begin van de as, en tussen het laatste blok en het einde van de as dezelfde ruimte is, als tussen de overige blokken. Echter, de ruimtes worden opgeteld en tussen twee blokken is de afstand twee keer zo groot als tussen een blok en het begin/einde van de 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 naar beneden

Laten we de richting van de hoofdas veranderen door flex-direction in te stellen op de waarde 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;
}

Voorbeeld . Waarde space-between. As naar beneden

Nu worden de blokken gelijkmatig over de verticale as verdeeld:

<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 . Uitlijning op het begin van de horizontale as (rijen) in grid

Laten we de uitlijning voor onze elementen instellen op het begin van de horizontale 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 . Uitlijning in het midden van de horizontale as in grid

Laten we nu de uitlijning voor onze elementen instellen in het midden van de horizontale 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 . Uitlijning op het einde van de horizontale as in grid

Laten we de uitlijning voor onze elementen instellen op het einde van de horizontale 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;
}

Zie ook

eigenschap flex-direction,
die de richting van de assen voor flex containers bepaalt
eigenschap align-items,
die de uitlijning langs de kruisende as bepaalt
eigenschap flex-wrap,
die de meerdere regels voor flex containers bepaalt
eigenschap flex-flow,
afkorting voor flex-direction en flex-wrap
eigenschap order,
die de volgorde van flex items bepaalt
eigenschap align-self,
die de uitlijning van één item bepaalt
eigenschap flex-basis,
die de grootte van een specifiek flex item bepaalt
eigenschap flex-grow,
die de "gulzigheid" van flex items bepaalt
eigenschap flex-shrink,
die de krimpfactor van flex items bepaalt
eigenschap flex,
afkorting voor flex-grow, flex-shrink en flex-basis