Какие существуют способы вертикального выравнивания элементов внутри флекс-контейнера?

Элементы флекс-контейнера выравниваются вдоль двух осей: главной и поперечной. htmlacademy.ru

Выравнивание по главной оси осуществляется с помощью свойства justify-content. htmlacademy.ru htmlweb.ru Некоторые способы:

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

Выравнивание по поперечной оси происходит с помощью свойства align-items. htmlacademy.ru htmlweb.ru Некоторые способы:

• stretch — элементы растягиваются вдоль всей оси (по умолчанию); htmlacademy.ru htmlweb.ru
• flex-start — элементы идут в начале оси; htmlacademy.ru htmlweb.ru
• flex-end — элементы идут в конце оси; htmlacademy.ru htmlweb.ru
• center — элементы в центре оси; htmlacademy.ru htmlweb.ru
• baseline — элементы размещены по базовой линии (невидимая линия, которая проходит по нижней части букв). htmlacademy.ru htmlweb.ru

Также для выравнивания отдельных элементов внутри флекс-контейнера используется свойство align-self. itchief.ru habr.com

Кроме того, есть свойство align-content, которое позволяет выравнивать не только элементы, но и ряды флекс-элементов вдоль поперечной оси. htmlacademy.ru