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

Смотрите также

свойство flex-direction,
которое задает направление осей flex блоков
свойство justify-content,
которое задает выравнивание по главной оси
свойство 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