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

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

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

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

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