如何用Flexbox实现Header与Content上下紧贴、Menu旁置的布局

需求说明 #

让#header与#content上下紧贴排列，#menu在视觉上与两者并排显示，且高度自动适配#header+#content的总高度，布局上#menu处于两者中间位置。

修改后的代码 #

HTML 结构

<div id="app">
    <div class="header-content-container">
        <div id="header">HEADER</div>
        <div id="content">CONTENT</div>
    </div>
    <div id="menu">MENU</div>
</div>

CSS 样式

#app {
    position: relative;
    display: flex;
    width: 100%;
    background-color: #eee;
    border-radius: 10px;
    padding: 2%;
    gap: 2%;
}

.header-content-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 40%;
    min-width: 300px;
}

#header, #content {
    position: relative;
    height: 300px;
    background-color: #333;
    border-radius: 10px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#menu {
    position: relative;
    width: 40%;
    min-width: 300px;
    height: 100%;
    background-color: #333;
    border-radius: 10px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

关键改动说明 #

• 新增header-content-container容器包裹#header和#content，通过flex-direction: column设置垂直排列，gap: 0实现两者上下紧贴。
• 移除#app的flex-wrap属性，确保容器与#menu始终保持横向并排布局。
• 设置#menu的height: 100%，使其高度自动适配header-content-container的总高度（即#header+#content的高度之和）。
• 优化宽度控制：将width和min-width属性统一设置在容器与#menu上，避免重复定义。

内容的提问来源于stack exchange，提问作者nego