Как работает свойство justify-content для выравнивания элементов на главной оси флексбокса?

Свойство justify-content в Flexbox выравнивает элементы внутри контейнера по главной оси. doka.guide При расположении элементов в ряд свойство управляет выравниванием по горизонтали, а при расположении в колонку — по вертикали. doka.guide

Некоторые значения justify-content и их эффект:

• flex-start. htmlacademy.ru bureau.ru Элементы стоят в начале оси. htmlacademy.ru
• flex-end. htmlacademy.ru bureau.ru Элементы стоят в конце оси. htmlacademy.ru
• center. htmlacademy.ru bureau.ru Элементы по центру оси. htmlacademy.ru
• space-between. htmlacademy.ru bureau.ru Элементы равномерно распределены вдоль главной оси, при этом первый элемент располагается в начале, а последний — в конце. htmlacademy.ru Между крайними элементами и контейнером отступа нет. htmlacademy.ru
• space-around. htmlacademy.ru bureau.ru Элементы равномерно распределены вдоль оси. htmlacademy.ru Расстояние между крайними элементами и контейнером равно половине отступа между соседними элементами. htmlacademy.ru
• space-evenly. htmlacademy.ru bureau.ru Элементы равномерно размещены вдоль оси. htmlacademy.ru Отступы между соседними элементами и краями контейнера равны. htmlacademy.ru

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