Основные отличия свойств justify-content и align-items во Flexbox заключаются в направлениях выравнивания элементов: 14

• justify-content выравнивает элементы вдоль основной оси. 15 Оно распределяет оставшееся пространство после того, как браузер вычислил необходимое пространство для всех элементов в контейнере flex. 5
• align-items выравнивает элементы вдоль поперечной оси. 15 По умолчанию у свойства значение stretch, то есть элементы растягиваются вдоль всей оси. 2

Некоторые значения свойств:

• justify-content: flex-start (элементы стоят в начале оси), flex-end (элементы стоят в конце оси), center (элементы по центру оси), space-between (элементы равномерно распределены вдоль главной оси), space-around (элементы равномерно распределены вдоль оси, но с добавлением половины пространства перед первым элементом и после последнего), space-evenly (элементы равномерно размещены вдоль оси, отступы между соседними элементами и краями контейнера равны). 2
• align-items: flex-start (элементы идут в начале оси), flex-end (элементы идут в конце оси), center (элементы в центре оси), baseline (элементы размещены по базовой линии). 2