Īpašība justify-content

Īpašība justify-content nosaka elementu izlīdzināšanu gar galveno asi flex blokiem un pa horizontālo asi gridiem. Attiecas uz vecāka elementu.

Sintakse

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

Vērtības

Vērtība	Apraksts
`flex-start`	Bloki ir piespiesti pie galvenās (horizontālās) ass sākuma.
`flex-end`	Bloki ir piespiesti pie galvenās (horizontālās) ass beigām.
`center`	Bloki atrodas galvenās (horizontālās) ass centrā.
`space-between`	Bloki ir izvietoti gar galveno (horizontālo) asi, savukārt pirmais elements ir piespiests pie ass sākuma, un pēdējais - pie ass beigām.
`space-around`	Bloki ir izvietoti gar galveno (horizontālo) asi, savukārt starp pirmo bloku un ass sākumu, pēdējo bloku un ass beigām ir tāds pats atstarpe, kā starp pārējiem blokiem. Tomēr, tie nav vienādi, kā varētu šķist: atstarpes tiek summētas un starp diviem blokiem attālums ir divreiz lielāks nekā starp bloku un ass sākumu/beigām.

Noklusējuma vērtība: flex-start.

Piemērs . Vērtība flex-start

Pašlaik ass ir vērsta no kreisās puses uz labo (to veic flex-direction: row), un bloki ir piespiesti pie kreisās puses:

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

Piemērs . Vērtība flex-end

Šajā piemērā ass arī ir vērsta no kreisās puses uz labo, bet bloki ir piespiesti pie labās puses, jo ir iestatīts justify-content ar vērtību 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;
}

Piemērs . Vērtība center

Pašlaik bloki atradīsies centrā neatkarīgi no galvenās ass virziena:

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

Piemērs . Vērtība space-between

Bloki ir izvietoti gar galveno asi, savukārt pirmais elements ir piespiests pie ass sākuma, un pēdējais - pie ass beigām:

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

Piemērs . Vērtība space-around

Bloki ir izvietoti gar galveno asi, savukārt starp pirmo bloku un ass sākumu, pēdējo bloku un ass beigām ir tāds pats atstarpe, kā starp pārējiem blokiem. Tomēr, atstarpes tiek summētas un starp diviem blokiem attālums ir divreiz lielāks, nekā starp bloku un ass sākumu/beigām:

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

Piemērs . Vērtība center. Ass uz leju

Mainīsim galvenās ass virzienu, iestatot flex-direction ar vērtību 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;
}

Piemērs . Vērtība space-between. Ass uz leju

Pašlaik bloki tiks vienmērīgi izvietoti vertikāli:

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

Piemērs . Izlīdzināšana pa horizontālās ass sākumu (rindas) gridā

Iestatīsim izlīdzināšanu mūsu elementiem pa horizontālās ass sākumu:

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

Piemērs . Izlīdzināšana pa horizontālās ass centru gridā

Tagad iestatīsim izlīdzināšanu mūsu elementiem pa horizontālās ass centru:

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

Piemērs . Izlīdzināšana pa horizontālās ass beigām gridā

Iestatīsim izlīdzināšanu mūsu elementiem pa horizontālās ass beigām:

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

Skatiet arī

īpašība flex-direction,
kas nosaka flex bloku asu virzienu
īpašība align-items,
kas nosaka izlīdzināšanu pa šķērsasi
īpašība flex-wrap,
kas flex bloku daudzrindu īpašību
īpašība flex-flow,
saīsinājums priekš flex-direction un flex-wrap
īpašība order,
kas nosaka flex bloku secību
īpašība align-self,
kas nosaka viena bloka izlīdzināšanu
īpašība flex-basis,
kas nosaka konkrēta flex bloka izmēru
īpašība flex-grow,
kas nosaka flex bloku "alkatību"
īpašība flex-shrink,
kas nosaka flex bloku saspiežamību
īpašība flex,
saīsinājums priekš flex-grow, flex-shrink un flex-basis