Свойство justify-content выравнивает флекс-элементы по ширине флекс-контейнера, распределяя оставшееся свободное пространство, незанятое флекс-элементами. Для выравнивания элементов по вертикали используется свойство align-content.
CSS синтаксис
justify-content: center | flex-start | flex-end | space-between | space-around | initial | inherit;
Возможные значения
Значение | Описание |
---|---|
center | Флекс-элементы выравниваются по центру флекс-контейнера. |
flex-start | Значение по умолчанию. Флекс-элементы позиционируются от начала флекс-контейнера. |
flex-end | Флекс-элементы позиционируются от конца флекс-контейнера. |
space-between | Флекс-элементы выравниваются по главной оси, свободное место между ними распределяется следующим образом: первый блок располагается в начале флекс-контейнера, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве, а свободное пространство равномерно распределяется между элементами. |
space-around | Флекс-элементы выравниваются по главной оси, а свободное место делится поровну, добавляя отступы справа и слева. |
inherit | Значение наследуется от родительского элемента. |
initial | Устанавливает значение по умолчанию. |
Пример использования
Установим свободное пространство между флекс-элементами внутри флекс-контейнера
div {
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
}