Ominaisuus justify-content

Ominaisuus justify-content määrittää elementtien tasauksen pääakselilla flex-säiliöille ja vaaka-akselilla grid-säiliöille. Sitä sovelletaan vanhempaelementtiin.

Syntaksi

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

Arvot

Arvo	Kuvaus
`flex-start`	Elementit on työnnetty pääakselin (vaaka-akselin) alkupäähän.
`flex-end`	Elementit on työnnetty pääakselin (vaaka-akselin) loppupäähän.
`center`	Elementit on keskitetty pääakselin (vaaka-akselin) suhteen.
`space-between`	Elementit jakautuvat tasaisesti pääakselilla (vaaka-akselilla), kun ensimmäinen elementti on työnnetty akselin alkupäähän ja viimeinen akselin loppupäähän.
`space-around`	Elementit jakautuvat tasaisesti pääakselilla (vaaka-akselilla), kun ensimmäisen elementin ja akselin alun, viimeisen elementin ja akselin lopun välillä on sama väli kuin muiden elementtien välillä. Ne eivät kuitenkaan ole yhtä suuria, kuten voisi luulla: välit lasketaan yhteen ja kahden elementin välillä etäisyys on kaksi kertaa suurempi kuin elementin ja akselin alun/lopun välillä.

Oletusarvo: flex-start.

Esimerkki . Arvo flex-start

Akseli on nyt suunnattu vasemmalta oikealle (tämä tekee flex-direction: row), ja elementit on työnnetty vasempaan reunaan:

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

Esimerkki . Arvo flex-end

Tässä esimerkissä akseli on myös suunnattu vasemmalta oikealle, mutta elementit on työnnetty oikeaan reunaan, koska justify-content on asetettu arvoon 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;
}

Esimerkki . Arvo center

Nyt elementit ovat keskitettyinä riippumatta pääakselin suunnasta:

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

Esimerkki . Arvo space-between

Elementit jakautuvat tasaisesti pääakselilla, kun ensimmäinen elementti on työnnetty akselin alkupäähän ja viimeinen akselin loppupäähän:

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

Esimerkki . Arvo space-around

Elementit jakautuvat tasaisesti pääakselilla, kun ensimmäisen elementin ja akselin alun, viimeisen elementin ja akselin lopun välillä on sama väli kuin muiden elementtien välillä. Kuitenkin, välit lasketaan yhteen ja kahden elementin välillä etäisyys on kaksi kertaa suurempi kuin elementin ja akselin alun/lopun välillä:

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

Esimerkki . Arvo center. Akseli alaspäin

Vaihdetaan pääakselin suunta asettamalla flex-direction arvoon 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;
}

Esimerkki . Arvo space-between. Akseli alaspäin

Nyt elementit jakautuvat tasaisesti pystyakselilla:

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

Esimerkki . Tasaus vaaka-akselin alkuun (rivit) gridissä

Asetetaan elementtien tasaus vaaka-akselin alkuun:

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

Esimerkki . Tasaus vaaka-akselin keskelle gridissä

Asetetaan nyt elementtien tasaus vaaka-akselin keskelle:

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

Esimerkki . Tasaus vaaka-akselin loppuun gridissä

Asetetaan elementtien tasaus vaaka-akselin loppuun:

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

Katso myös

ominaisuus flex-direction,
joka määrittää flex-säiliön akselien suunnan
ominaisuus align-items,
joka määrittää tasauksen poikittaisakselilla
ominaisuus flex-wrap,
joka määrittää flex-säiliön monirivisyyden
ominaisuus flex-flow,
lyhenne flex-directionille ja flex-wraplle
ominaisuus order,
joka määrittää flex-elementtien järjestyksen
ominaisuus align-self,
joka määrittää yhden elementin tasauksen
ominaisuus flex-basis,
joka määrittää tietyn flex-elementin koon
ominaisuus flex-grow,
joka määrittää flex-elementtien "ahneuden"
ominaisuus flex-shrink,
joka määrittää flex-elementtien kutistuvuuden
ominaisuus flex,
lyhenne flex-growille, flex-shrinkille ja flex-basikselle