如何用Flexbox实现2个Div保持16:9比例并让中间Div填充空白？

期望的布局结构：

• 上方一行包含两个面板，一个自适应宽度，一个固定宽度
• 下方一行包含三个面板，左右两个面板内是16:9比例的图片，中间面板填充剩余空间
• 窗口高度变化时，所有行和面板都能自适应缩放，避免溢出

我之前把16:9图片的width设为100%，虽然实现了图片的固定比例，但丢失了Flexbox的响应式高度缩放能力——调整窗口大小时，只有row1会改变高度，row2直接溢出，完全不缩放。我试过在中间加第三个Div，想让视口高度减小时它填充剩余空间，让两张图片缩小，但没解决问题。

想问：用Flexbox能不能实现这种布局？还是必须用CSS Grid或者JavaScript？

现有HTML代码 #

<div id="container">
      <div id="row1">
            <div id="panel1"></div>
            <div id="panel2"></div>
      </div>
      <div id="row2">
            <div id="panel3">
              <img/>
            </div>
            <div id="panel4"></div>
            <div id="panel5">
               <img/>
       </div>
</div>

现有CSS代码 #

#container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

#row1 {
    display: flex;
    flex-wrap: wrap;
    flex: 2;
    gap: 7px;
    width: 100%;
    padding: 7px;
}
#row2 {
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    gap: 7px;
    width: 100%;
    padding: 0 7px 7px 7px;
}

#panel1 {
    background: white;
    flex: 1;
}

#panel2 {
    background: white;
    width: 100px;
}

#panel3 {
    background: white;
    flex: 1;
}

#panel4 {
    background: white;
    flex: 1;
}

#panel5 {
    background: white;
    flex: 1;
}

#image1 {
width: 100%;
}

解决方案 #

用Flexbox完全可以实现，核心是给图片容器加上比例约束，同时修正Flex布局的高度传递问题，不需要额外加Div或者用JS。

修改后的CSS代码

#container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 防止整体溢出 */
    box-sizing: border-box;
}

#row1 {
    display: flex;
    flex: 2;
    gap: 7px;
    padding: 7px;
}

#row2 {
    display: flex;
    flex: 1;
    gap: 7px;
    padding: 0 7px 7px 7px;
    min-height: 0; /* 关键：允许row2随视口高度缩小 */
}

#panel1 {
    background: white;
    flex: 1;
}

#panel2 {
    background: white;
    width: 100px;
    flex-shrink: 0; /* 固定宽度不被压缩 */
}

/* 给图片容器设置16:9比例约束 */
#panel3, #panel5 {
    background: white;
    flex: 1;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9比例的核心：9/16*100% */
}

#panel3 img, #panel5 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

#panel4 {
    background: white;
    flex: 1;
}

关键修改点说明

1. min-height: 0：Flexbox默认会让子项的最小高度等于内容高度，加上这个属性才能让row2随着视口高度缩小而压缩，解决溢出问题。
2. 图片比例实现：通过padding-top: 56.25%撑开图片容器的高度（百分比基于容器宽度），再配合绝对定位的图片填满容器，既保证了16:9比例，又能让容器随Flex布局自适应缩放。

更简洁的CSS Grid替代方案

如果觉得Flexbox的设置有点繁琐，用CSS Grid会更直观，代码逻辑更清晰：

#container {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 2fr 1fr; /* 两行高度比例2:1 */
    gap: 7px;
    padding: 7px;
    box-sizing: border-box;
}

#row1 {
    display: grid;
    grid-template-columns: 1fr 100px; /* 第一行自适应+固定宽度 */
    gap: 7px;
}

#row2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 第二行三等分 */
    gap: 7px;
}

#panel3, #panel5 {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

#panel3 img, #panel5 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#panel1, #panel2, #panel4 {
    background: white;
}

总结：两种方案都能实现需求，Flexbox完全可行，Grid写法更简洁，不需要用到JavaScript。

内容的提问来源于stack exchange，提问作者newbieCoder.pkg