Flexbox子元素.f无法适配容器布局的问题求助

问题说明 #

需要实现.f元素与包含.b、.c、.d、.e的区域并排布局，当前媒体查询中的Flex配置导致布局不符合预期。

修改后的完整代码 #

CSS代码 #

body {
  background: papayawhip;
  text-align: center;
  font-size: 2em;
  margin-bottom: 25px;
}
.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100vh;
  justify-content: center;
  row-gap:10px;
  column-gap: 10px;
}
.a{
  background-color: teal;
  width: 80vw;
  height: 20vh;
}
.b{
  background-color: aliceblue;
  width: 80vw;
  height: 40vh;
  margin-bottom: 10px;
}
.c{
  background-color: #264b75;
  width: 25vw;
  height: 20vh;
}
.d{
  background-color: #773535;
  width: 25vw;
  height: 20vh;
}
.e{
  background-color: #e3b036;
  width: 25vw;
  height: 20vh;
}
.f{
  background-color: #74446f;
  width: 80vw;
  height: 20vh;
}
.nonsense{
  display: flex;
  flex-flow: row;
  justify-content: space-evenly;
}
/* desktop version */
@media (min-width: 300px){
.container{
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.broad{
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  width: 60vw;
  gap: 10px;
}
.b{
  width: 100%;
  height: 40vh;
  margin-bottom: 0;
}
.f{
  width: 20vw;
  height: 60vh;
}
.nonsense{
  display: flex;
  flex-direction: row;
  width: 100%;
  column-gap: 10px;
  justify-content: space-between;
}
.c, .d, .e{
  width: calc((100% - 20px)/3);
}
}

HTML代码 #

<body>
  <div class="container">
    <div class="a">a</div>
    <div class="broad">
        <div class="b">b</div>
      <div class="nonsense">
        <div class="c">c</div>
        <div class="d">d</div>
        <div class="e">e</div>
    </div>
    </div>
      <div class="f">f</div>
  </div>
</body>

关键修改点 #

• 容器方向修正：媒体查询中.container的flex-direction从column改回row，并设置flex-wrap: nowrap，确保.broad和.f横向并排不换行。
• 宽度分配调整：给.broad设置60vw宽度，.f为20vw，加上间隙刚好匹配原80vw的布局范围。
• 内部元素自适应：.b和.nonsense改为占满.broad的宽度，.c/.d/.e用calc计算宽度，确保在有间隙的情况下均匀分布。
• 移除冗余样式：删除.b的align-self和flex-direction（.b不是Flex容器，无需设置），用gap替代margin-bottom更符合Flex布局规范。

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