Својството justify-content

Својството justify-content го поставува усогласувањето на елементите по главната оска за flex блокови и по хоризонталната оска за grid-ови. Се применува на родителскиот елемент.

Синтакса

селектор {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Вредности

Вредност	Опис
`flex-start`	Блоковите се притиснати кон почетокот на главната (хоризонтална) оска.
`flex-end`	Блоковите се притиснати кон крајот на главната (хоризонтална) оска.
`center`	Блоковите се поставени во центарот на главната (хоризонтална) оска.
`space-between`	Блоковите се распределени по главната (хоризонтална) оска, при што првиот елемент е притиснат кон почетокот на оската, а последниот - кон крајот.
`space-around`	Блоковите се распределени по главната (хоризонтална) оска, при што помеѓу првиот блок и почетокот на оската, последниот блок и крајот на оската има исто растојание, како и помеѓу останатите блокови. Сепак, тие не се еднакви, како што може да изгледа: растојанијата се собираат и помеѓу два блока растојанието е двојно поголемо отколку помеѓу блокот и почетокот/крајот на оската.

Стандардна вредност: flex-start.

Пример . Вредност flex-start

Моментално оската е насочена од лево кон десно (ова го прави flex-direction: row), а блоковите се притиснати кон левата страна:

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

Пример . Вредност flex-end

Во овој пример оската е исто така насочена од лево кон десно, но блоковите се притиснати кон десната страна, бидејќи е зададено justify-content со вредност 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;
}

Пример . Вредност center

Моментално блоковите ќе стојат во центарот независно од насоката на главната оска:

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

Пример . Вредност space-between

Блоковите се распределени по главната оска, при што првиот елемент е притиснат кон почетокот на оската, а последниот - кон крајот:

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

Пример . Вредност space-around

Блоковите се распределени по главната оска, при што помеѓу првиот блок и почетокот на оската, последниот блок и крајот на оската исто растојание, како и помеѓу останатите блокови. Сепак, растојанијата се собираат и помеѓу два блока растојанието е двојно поголемо, отколку помеѓу блокот и почетокот/крајот на оската:

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

Пример . Вредност center. Оската надолу

Да ја смениме насоката на главната оска, задавајќи flex-direction со вредност 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;
}

Пример . Вредност space-between. Оската надолу

Моментално блоковите ќе се распределат рамномерно по вертикала:

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

Пример . Усогласување по почетокот на хоризонталната оска (редови) во grid

Да поставиме усогласување за нашите елементи по почетокот на хоризонталната оска:

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

Пример . Усогласување по центарот на хоризонталната оска во grid

А сега да поставиме усогласување за нашите елементи по центарот на хоризонталната оска:

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

Пример . Усогласување по крајот на хоризонталната оска во grid

Да поставиме усогласување за нашите елементи по крајот на хоризонталната оска:

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

Погледнете исто така

својството flex-direction,
кое ја задава насоката на оските на flex блоковите
својството align-items,
кое го поставува усогласувањето по попречната оска
својството flex-wrap,
кое ја задава можноста за повеќе редови на flex блоковите
својството flex-flow,
кратенка за flex-direction и flex-wrap
својството order,
кое го задава редоследот на flex блоковите
својството align-self,
кое го задава усогласувањето на еден блок
својството flex-basis,
кое ја задава големината на конкретен flex блок
својството flex-grow,
кое ја задава способноста на flex блоковите да растат
својството flex-shrink,
кое ја задава способноста на flex блоковите да се намалуваат
својството flex,
кратенка за flex-grow, flex-shrink и flex-basis