Основы flexbox

Выравнивние элементов: align-self у элемента означает, что он наследует значение родительского элемента - родительский элемент в свою очередь получает указание об выравнивании из свойства align-items.

Менять свойство flex-wrap - nowrap на wrap чтобы элементы переносились - адаптивка

flex-basis минимальный желаемый размер - будет сжиматься при нехватке места.
flex-shrink = 0 несжимаемый элемент, = 1 сжимаемый.
flex-grow =1 занимаем все свободное пространство .