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

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

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

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

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

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