Align item not working inside flex container, why?

Question

css

Trying to make up the header of the site, I came across an interesting effect ( Code ). I tried to make a flex item into a flex container, but align-items stopped working for .header-container . That is, the .logo and .menu elements are no longer centered vertically. If display: flex is removed from .menu, then the elements will begin to be centered, but why this happens, I have no idea.

Answer 1

align-items works for you. Just either remove the height from the logo, or center the logo in the container