Omadus justify-content

Omadus justify-content määrab elementide joondamise põhitelje suunas flex-konteinerite jaoks ning horisontaaltelje suunas grid-konteinerite jaoks. Rakendub vanemelemendile.

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`flex-start`	Kastid on surutud põhitelje (horisontaaltelje) algusesse.
`flex-end`	Kastid on surutud põhitelje (horisontaaltelje) lõppu.
`center`	Kastid asuvad põhitelje (horisontaaltelje) keskel.
`space-between`	Kastid on jaotatud piki põhitelge (horisontaaltelge), kusjuures esimene element on surutud telje algusesse, viimane aga telje lõppu.
`space-around`	Kastid on jaotatud piki põhitelge (horisontaaltelge), kusjuures esimese kasti ja telje alguse, viimase kasti ja telje lõpu vahel on sama vahe kui ülejäänud kastide vahel. Siiski need ei ole võrdsed, nagu võiks arvata: vahesummad liidetakse ja kahe kasti vahel on kahekordne vahemaa võrreldes kasti ja telje alguse/lõpu vahega.

Vaikeväärtus: flex-start.

Näide . Väärtus flex-start

Praegu on telg suunatud vasakult paremale (seda teeb flex-direction: row) ja kastid on surutud vasakule küljele:

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

Näide . Väärtus flex-end

Selles näites on telg samuti suunatud vasakult paremale, kuid kastid on surutud paremale küljele, kuna on määratud justify-content väärtusega 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;
}

Näide . Väärtus center

Praegu asuvad kastid keskele sõltumata põhitelje suunast:

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

Näide . Väärtus space-between

Kastid on jaotatud piki põhitelge, kusjuures esimene element on surutud telje algusesse, viimane aga telje lõppu:

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

Näide . Väärtus space-around

Kastid on jaotatud piki põhitelge, kusjuures esimese kasti ja telje alguse, viimase kasti ja telje lõpu vahel on sama vahe kui ülejäänud kastide vahel. Siiski, vahesummad liidetakse ja kahe kasti vahel on kaugus kaks korda suurem kui kasti ja telje alguse/lõpu vahel:

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

Näide . Väärtus center. Telg allapoole

Muudame põhitelje suunda, määrates flex-direction väärtuseks 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;
}

Näide . Väärtus space-between. Telg allapoole

Praegu jaotuvad kastid ühtlaselt vertikaalselt:

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

Näide . Joondamine horisontaaltelje algusesse (read) gridis

Määrame oma elementide joondamise horisontaaltelje algusesse:

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

Näide . Joondamine horisontaaltelje keskele gridis

Nüüd määrame oma elementide joondamise horisontaaltelje keskele:

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

Näide . Joondamine horisontaaltelje lõppu gridis

Määrame oma elementide joondamise horisontaaltelje lõppu:

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

Vaata ka

omadus flex-direction,
mis määrab flex-konteinerite telgede suuna
omadus align-items,
mis määrab joondamise risttelje suunas
omadus flex-wrap,
mis määrab flex-konteinerite mitmerealise paigutuse
omadus flex-flow,
lühend flex-direction ja flex-wrap jaoks
omadus order,
mis määrab flex-elementide järjekorra
omadus align-self,
mis määrab üksiku elemendi joondamise
omadus flex-basis,
mis määrab konkreetse flex-elemendi suuruse
omadus flex-grow,
mis määrab flex-elementide "ahneuse"
omadus flex-shrink,
mis määrab flex-elementide kokkutõmbumise
omadus flex,
lühend flex-grow, flex-shrink ja flex-basis jaoks