Својство justify-content

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

Синтакса

селектор {
	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;
}

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

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

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

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

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

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

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

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

<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