Разница между align-items и align-self в Flexbox в том, что первое свойство применяется ко всем элементам, а второе — к определённым. 3

Align-items выравнивает содержимое контейнера вдоль поперечной оси. 1 У свойства есть пять возможных значений: 1

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

Align-self устанавливает выравнивание отдельного flex-элемента вдоль поперечной оси, переопределяя значение свойства align-items. 1 Значения align-self задаются для каждого flex-элемента и могут быть следующими: 1

• flex-start — выравнивает элемент по началу поперечной оси; 1
• flex-end — выравнивает элемент по концу поперечной оси; 1
• center — выравнивает элемент по центру поперечной оси; 1
• stretch (по умолчанию для flex-элементов) — элементы растягиваются на всю высоту контейнера. 1