html - 具有固定 div 的两列 Flexbox 布局

Question

我正在尝试学习 Flexbox，并尝试实现以下布局。

+----------+----------+
|          |nav       |
|  header  +----------+
|          |section   |
+----------+----------+

HTML 结构

<header></header>
<nav></nav>
<section></section>

布局要求

1. 每个元素的宽度正好是 50vw(或 50%)
2. 标题内容始终居中且固定。占用 100vh。
3. 导航内容已修复
4. 部分内容可滚动，溢出部分隐藏。

这对于 Flexbox 来说是可能的吗？

在移动设备上，我希望将所有三个内容放在一列中，但这部分很简单。

Answer 1

body {
  display: flex;
  flex-flow: column wrap;
  height: 100vh; /* key rule; this tells flex items where to wrap
                    to form second column */
}

header {
  flex: 0 0 100%;
  width: 50%;

  /* center content */
  display: flex;
  justify-content: center;
  align-items: center;
}

nav, section {
  flex: 0 0 50%;
  width: 50%;
}

/* non-essential decorative styles */
*       { box-sizing: border-box; margin: 0; }
header  { background-color: aqua; }
nav     { background-color: tomato; }
section { background-color: lightgreen; }

<header>header</header>
<nav>nav</nav>
<section>section</section>

有关详细说明和替代方法，请参阅我的回答:

• Is it possible for flex items to align tightly to the items above them?