Свойство justify-content в CSS выравнивает элементы внутри flex-контейнера вдоль основной оси. 3 Оно распределяет оставшееся пространство после того, как браузер вычислил необходимое пространство для всех элементов в контейнере flex. 3

Некоторые значения свойства justify-content и их описание:

• flex-start (значение по умолчанию) — первый элемент выравнивается по левому краю контейнера (при расположении в виде строки) или по верху (при расположении в виде столбца), за ним располагается второй элемент и так далее. 1
• flex-end — последний элемент выравнивается по правому краю (при расположении в виде строки) или по низу (при расположении в виде столбца) контейнера, за ним выравнивается предпоследний элемент и так далее. 1
• center — элементы выравниваются по центру. 1
• space-between — первый элемент выравнивается по левому краю (при расположении в виде строки) или по верху (при расположении в виде столбца), а последний элемент — по правому краю контейнера (при расположении в виде строки) или по низу (при расположении в виде столбца). 1 Всё оставшееся пространство между ними равным образом распределяется между остальными элементами. 1
• space-around — если в строке только один элемент или элементы выходят за пределы контейнера, то его действие аналогично значению center. 1 В ином случае элементы равным образом распределяют пространство между левым и правым краем контейнера, а расстояние между первым и последним элементом и границами контейнера составляет половину расстояния между элементами. 1
• space-evenly — элементы равномерно размещены вдоль оси. 2 Отступы между соседними элементами и краями флекс-контейнера равны. 2

Важно: свойство justify-content может выполнять действия только при наличии свободного места для распространения. 5 Если набор flex-элементов занимает всё пространство на главной оси, использование justify-content ничего не изменит. 5