Чем justify-content отличается от flex-direction в Flexbox?

justify-content и flex-direction отличаются по функциям в Flexbox.

Flex-direction определяет направление главной оси, по которой располагаются flex-элементы. 14 По умолчанию ось направлена горизонтально, слева направо. 1 Свойство flex-direction позволяет менять это направление: 25

• flex-direction: row — ось направлена слева направо, элементы располагаются в ряд. 2 Это значение по умолчанию. 2
• flex-direction: row-reverse — элементы идут в обратном направлении — справа налево. 2
• flex-direction: column — элементы располагаются в столбец сверху вниз. 2
• flex-direction: column-reverse — элементы идут снизу вверх. 2

justify-content, в свою очередь, отвечает за расположение элементов на главной оси. 45 Свойство может принимать разные значения, например:

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