A justify-content tulajdonság

A justify-content tulajdonság az elemek igazítását határozza meg a főtengely mentén flex tárolók esetén és a vízszintes tengely mentén grid tárolók esetén. A szülő elemre vonatkozik.

Szintaxis

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

Értékek

Érték	Leírás
`flex-start`	Az elemek a fő (vízszintes) tengely elejéhez igazodnak.
`flex-end`	Az elemek a fő (vízszintes) tengely végéhez igazodnak.
`center`	Az elemek a fő (vízszintes) tengely közepe mentén középre igazodnak.
`space-between`	Az elemek egyenletesen elosztva a fő (vízszintes) tengely mentén, ahol az első elem a tengely elejéhez, az utolsó elem pedig a tengely végéhez igazodik.
`space-around`	Az elemek egyenletesen elosztva a fő (vízszintes) tengely mentén, ahol az első elem és a tengely eleje között, valamint az utolsó elem és a tengely vége között ugyanakkora a tér, mint a többi elem között. *Azonban, ezek nem* egyenlőek, ahogy az első ránézésre tűnhet**: a tereket összeadjuk, és két elem között két times nagyobb a távolság, mint egy elem és a tengely eleje/vége között.

Alapértelmezett érték: flex-start.

Példa . flex-start érték

Jelenleg a tengely balról jobbra irányul (ezt teszi a flex-direction: row), és az elemek a bal oldalhoz igazodnak:

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

Példa . flex-end érték

Ebben a példában a tengely szintén balról jobbra irányul, de az elemek a jobb oldalhoz igazodnak, mert a justify-content tulajdonság flex-end értékre van állítva:

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

Példa . center érték

Most az elemek középre igazodnak, függetlenül a főtengely irányától:

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

Példa . space-between érték

Az elemek elosztva a főtengely mentén, ahol az első elem a tengely elejéhez, az utolsó elem pedig a tengely végéhez igazodik:

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

Példa . space-around érték

Az elemek elosztva a főtengely mentén, ahol az első elem és a tengely eleje között, az utolsó elem és a tengely vége között ugyanakkora a tér, mint a többi elem között. Azonban, a terek összeadódnak és két elem között a távolság két times nagyobb, mint egy elem és a tengely eleje/vége között:

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

Példa . center érték. Tengely lefelé

Változtassuk meg a főtengely irányát a flex-direction tulajdonság column értékre állításával:

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

Példa . space-between érték. Tengely lefelé

Most az elemek egyenletesen oszlanak el függőlegesen:

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

Példa . Igazítás a vízszintes tengely eleje mentén (sorok) gridben

Állítsuk be az elemek igazítását a vízszintes tengely eleje mentén:

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

Példa . Igazítás a vízszintes tengely közepe mentén gridben

Most állítsuk be az elemek igazítását a vízszintes tengely közepe mentén:

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

Példa . Igazítás a vízszintes tengely vége mentén gridben

Állítsuk be az elemek igazítását a vízszintes tengely vége mentén:

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

Lásd még

a flex-direction tulajdonság,
amely a flex tárolók tengelyirányát határozza meg
a align-items tulajdonság,
amely a keresztirányú tengely mentén történő igazítást határozza meg
a flex-wrap tulajdonság,
amely a flex tárolók többsoros voltát határozza meg
a flex-flow tulajdonság,
rövidítés a flex-direction és flex-wrap tulajdonságokra
a order tulajdonság,
amely a flex elemek sorrendjét határozza meg
a align-self tulajdonság,
amely egy elem igazítását határozza meg
a flex-basis tulajdonság,
amely egy adott flex elem méretét határozza meg
a flex-grow tulajdonság,
amely a flex elemek "kapzsiságát" (növekedési tényezőjét) határozza meg
a flex-shrink tulajdonság,
amely a flex elemek zsugorodását határozza meg
a flex tulajdonság,
rövidítés a flex-grow, flex-shrink és flex-basis tulajdonságokra