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

← →
↑
en ru