Выравнивание по поперечной оси
Логотип и ссылки теперь на двух концах панели навигации, но оба прилипли к её верхнему краю, а ссылки даже не на одном уровне с логотипом. Мы хотим, чтобы они были посередине высоты панели.
Положение элементов на поперечной оси задаёт свойство align-items flex-контейнера. В строке поперечная ось идёт сверху вниз, поэтому align-items двигает элементы вверх и вниз:
stretch: элементы растягиваются на всю поперечную ось, поэтому в строке они такой же высоты, как контейнер. Растягиваются только элементы без заданной высоты. Так бывает, если align-items не задан.
flex-start: элементы прижаты к началу поперечной оси (в строке — к верху), и их высота равна высоте содержимого.
center: элементы стоят посередине.
flex-end: элементы прижаты к концу (в строке — к низу).
Наши логотип и ссылки растянуты на всю высоту панели навигации, но текст в каждом из них остаётся вверху. Поэтому они и выглядят прилипшими к верху.
Растягивание тоже полезно: благодаря ему все наши карточки пород одной высоты, хотя в некоторых из них больше текста, чем в других. Прокрутите вниз и посмотрите.
Задание
- 1
В правило для
.navigationдобавьте объявлениеalign-items: center. Логотип и ссылки переместятся на середину высоты панели.