Align item не работает внутри флекс контейнера, в чем причина?

Question

[Haykeloff]

Пытаясь верстать шапку сайта наталкнулся на интересны эффект (Код). Я пытался флекс элемент сделать флекс контейнером, но у .header-container перестал работать align-items. То есть элементы .logo и .menu перестали центрироваться по вертикали. Если у .menu убрать display: flex, то элементы начнут центрироваться, но почему так происходит, ума не приложу.

Answer 1

[Андрей Пастухов]

align-items у вас работает. Просто либо у лого уберите height, либо в контейнере лого сделайте центрирование

Comments

[Haykeloff]

Спасибо за ответ, но еще пара вопросоа.

align-items у вас работает

Я подразумевал что оно не центрирует элементы.

Просто либо у лого уберите height

Почему? Чем она мешает? По макету высота именно 130px.

либо в контейнере лого сделайте центрирование

Как именно?

[Андрей Пастухов]

Вот ваша верстка. Серое поле - это header-container. По синим пунктирным направляющим видно что menu отцентрировано относительно header-container. А блок с logo задает высоту в 130px себе и родителю header-container.


А вот видно по направляющим как вы задали размеры для контейнера logo. И видно как текст внутри контейнера вылазит за пределы, что и дает Вам ощущение того что align-items не работает.


> Как именно?
в блоке logo задать 2 стиля: display: flex; aling-items: center;

[Haykeloff]

tyllo, Огромное спасибо, теперь понял. Размер текста скопировал с другими стилями из авакод, и забыл удалить. Совсем забыл что задал высоту .header. Теперь задал header-container min-height и все заработало. Но все же кое что не понял, если убрать у меню display: flex, то и меню и лого смещаются вниз, почему?