html - flex 盒子的问题

Question

我是 flexbox 的新手，我创建了以下内容以便拥有顶部导航，顶部导航下方有三列。当我打开我的 HTML 文件时，顶部导航是 80px 高，但三列只有 50%，减去标题的 80px。我不明白这是怎么回事？三列不应该只填差吗？

body {
  font: 24px Helvetica;
  background: #999999;
}
.layout {
  min-height: 100vh;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}
.top-navigation {
  width: 100vw;
  height: 80px;
  background: #cc2936;

}
.left-sidebar {
  width: 25%;
  background: #dcdcdc;
  flexgrow: 1;
}
.main-outlet {
  width: 50%;
  background: #ffffff;
  flexgrow: 1;

}
.right-sidebar {
  width: 25%;
  background: #dcdcdc;
  flexgrow: 1;
}

<div class="layout">
  <div class="box top-navigation"></div>
  <div class="box left-sidebar"></div>
  <div class="box main-outlet"></div>
  <div class="box right-sidebar"></div>
</div>

Answer 1

我认为您需要稍微更改一下布局。然后，您可以将包装 div 设置为具有 flex-direction: column 和 align-content: stretch 到三列，如下所示:

body {
  font: 24px Helvetica;
  background: #999999;
  margin: 0;
}
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex-flow: row;
  flex-wrap: wrap;
  align-content: stretch;
}
.top-navigation {
  width: 100vw;
  height: 80px;
  background: #cc2936;

}
.left-sidebar {
  width: 25%;
  background: #dcdcdc;
}
.main-outlet {
  width: 50%;
  background: #ffffff;
}
.right-sidebar {
  width: 25%;
  background: #dcdcdc;
}

<div class="box top-navigation"></div>
<div class="layout">
  <div class="box left-sidebar"></div>
  <div class="box main-outlet"></div>
  <div class="box right-sidebar"></div>
</div>