Соберите контейнер с тремя блоками и добавьте ему
display: flex. По умолчанию элементы стоят в строке: главная ось идёт по горизонтали, а поперечная по вертикали. Свойство justify-content выравнивает элементы вдоль главной оси, align-items вдоль поперечной.Теперь переключите
flex-direction с row на column и оставьте остальные правила прежними. Элементы начнут двигаться иначе, потому что главная ось станет вертикальной, а поперечная горизонтальной. Так проще увидеть, почему знакомое свойство иногда сдвигает блоки не в ту сторону, которую вы ожидали.Меняйте по одному значению: попробуйте
flex-start, center и space-between, затем сравните строку и столбец. Схема двух осей и готовые шаблоны Flexbox помогут закрепить результат на навигации, карточке с текстом и подвале страницы.