Свойство justify-content влияет на расположение элементов в контейнерах, выравнивая их вдоль основной оси (при расположении в виде строки — по горизонтали, при расположении в виде столбца — по вертикали). 3

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

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

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