使用Flexbox无法让Header置于菜单下方的布局问题求助

问题根源在于HTML结构嵌套错误：你将带Logo的header-container放在了顶部菜单的容器menu-container内部，导致浅蓝色Header栏被包含在蓝色菜单容器中，无法自然排列到菜单下方。

修改后的HTML代码 #

<body>
    <!-- 顶部蓝色菜单容器 -->
    <div class='menu-container'>
        <div class='menu'>
            <div class='date'>Feb 7, 2023</div>
            <div class="links">
                <div class='signup'>Sign Up</div>
                <div class='login'>Login</div>
            </div>   
        </div>    
    </div>
    <!-- 下方浅蓝色Header容器，移到menu-container外面 -->
    <div class='header-container'>
        <div class='header'>
            <div class='subscribe'>Subscribe &#9662;</div>
            <div class='logo'><img src='images/awesome-logo.svg'/></div>
            <div class='social'><img src='images/social-icons.svg'/></div>
        </div>
    </div>    
</body>

说明 #

1. 将header-container从menu-container中移出，作为body的直接子元素放在menu-container之后，浏览器会按HTML顺序先渲染顶部蓝色菜单，再渲染下方的浅蓝色Header栏。
2. 你的CSS代码无需修改，原有的Flexbox属性已经正确设置了菜单和Header内部元素的布局逻辑。

调整后即可实现预期布局：顶部是带日期、登录/注册按钮的蓝色菜单，下方是带订阅按钮、Awesome Logo和社交图标的浅蓝色Header栏。

内容的提问来源于stack exchange，提问作者A Soggy Crouton