Особенности использования свойства vertical-align с Flexbox:

• Предпочтительнее использовать flexbox вместо float для вертикального выравнивания элементов. 1 Последний извлекает элементы из регулярного потока, что мешает правильной работе vertical-align. 1
• Для определения положения всех элементов по вертикальной оси в Flexbox используется свойство align-items. 25 Например, установка значения align-items: center гарантирует, что все дочерние элементы flex-контейнера будут выровнены по вертикали по центру. 5
• Для выравнивания отдельного элемента по вертикали в Flexbox используется свойство align-self. 25 Например, установив align-self: center для конкретного элемента, можно выровнять его по вертикали внутри flex-контейнера независимо от других элементов. 5