# Выравнивание flex элементов

Для выравнивания флекс элементов используется специальное свойство `justify-content`. Оно принимает достаточно много значений, которые мы и изучим в данном уроке.

## Значение center

Значение `center` позволяет выровнять элементы по центру:

`.parent { display: flex; justify-content: center; }`

Результат выполнения кода:

Повторите страницу по данному образцу:

## Значение space-between

Значение `space-between` позволяет сделать так, чтобы элементы равномерно распределились по своему родителю, а расстояние между ними рассчиталось автоматически. При этом первый элемент будет прижат к левому краю, а последний - к правому.

Давайте посмотрим на примере:

`.parent { display: flex; justify-content: space-between; }`

Результат выполнения кода:

Повторите страницу по данному образцу:

## Значение space-around

Значение `space-around` работает похожим образом, только делает так, чтобы первый и последний элемент отступали от края родителя.

С первого взгляда может показаться, что расстояние между элементами и между крайними элементами и родителем будут равны, однако, это не так - расстояние между элементами будет в `2` раза больше, чем между родителем и крайним элементом.

Посмотрим на примере:

`.parent { display: flex; justify-content: space-around; }`

Результат выполнения кода:

Повторите страницу по данному образцу:

## Значение space-evenly

Поведение `space-around` чаще всего не то, которое вам хотелось бы. Чаще всего нам нужно сделать так, чтобы все указанные выше промежутки были равны.

Для этого придумано значение `space-evenly`, которое и сделает то, что нам нужно:

`.parent { display: flex; justify-content: space-evenly; }`

Результат выполнения кода:

Повторите страницу по данному образцу:

←→
↑