Как свойство justify-content влияет на расположение элементов в контейнерах?

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

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

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

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