Свойство 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